close

How to add a
tag in reactjs between two strings?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to add a
tag in reactjs between two strings?
in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to add a <br> tag in reactjs between two strings?

  1. How to add a
    tag in reactjs between two strings?

    to add a <br> tag in reactjs between two strings break text to line:
    render() { ... <div> {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )} </div> ...

  2. How to add a
    tag in reactjs between two strings?

    to add a <br> tag in reactjs between two strings break text to line:
    render() { ... <div> {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )} </div> ...

Method 1

You should use JSX instead of string:

<div>No results.<br />Please try another search term.</div>

Because each jsx should have 1 wrapper I added a <div> wrapper for the string.

Here it is in your code:

render() {
   let data = this.props.data;
   let isLoading = this.props.isLoading;
   let isDataEmpty = Object.entries(data).length === 0;
   let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> :
       Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
   return (
       <div className='movieList'>{movieList}</div>
   );
}

Method 2

break text to line:

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment