Question: Is it possible to break line after every anchor element using CSS and not doing it manually in HTML?

I've already tried some word-breaks, etc., but none of them worked.

Answer: 
From the [documentation](https://reactjs.org/docs/react-component.html#setstate);

> 
> setState() does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
> 
> 
> 

Suggestion -> passing a callback function:

```
this.setState({
      data: this.state.instant_data,
    }, () => {
    const link = `https://newsapi.org/v2/everything?q=${this.state.data}&apiKey=API_KEY`;
    const raw_data = await fetch(link);
    const data = await raw_data.json();
    console.log(data);
});

```
Change your input to:

```
<input
  onChange={(e) => this.setState({ instant_data: e.target.value })}
  className="form-control me-2"
  type="search"
  placeholder="Search"
  aria-label="Search"
  value={this.state.instant_data} <--- added this here
/>

```

And change your `searchNews` function to:

```
searchNews = async (e) => {
    e.preventDefault()
    const link = `https://newsapi.org/v2/everything?q=${this.state.instant_data}&apiKey=API_KEY`
    const raw_data = await fetch(link)
    const data = await raw_data.json()
    console.log(data)
}

```

**Gist**

```
// this is async operation
this.setState({
  data: this.state.instant_data,
});

```

So you end up making the call first and then update the state variable `data`