How to render simple text with br tag?

user_10370582 0
Viewed 74

I have a simple component:

class News extends Component {
  state = { 
     isSimple: this.props.isSimple
  }
  render() { 
    return (
      <div>
        <div className="extended">extended</div>
        simple text
      </div>
    );
  }
}

export default News;

I would like to display only either extended or simple, so I do:

class News extends Component {
  state = { 
    isSimple: this.props.isSimple
 }
  render() { 
    var text;
    if (this.state.isSimple) {
      text = "simple <br /> text";
    } else {
      text = <div className="extended">extended</div>
    }
    return (
      {text}
    );
  }
}

But if state isSimple = true then this show me:

simple <br /> text

instead of:

simple
text

Besides, it is not very legible. Can I make an if condition in the middle of the render method?

jsx reactjs javascript
3 Answers

Why you need to save text and return it? instead return jsx statement, and instead of using if statement, use operators. something like:

class News extends Component {
  state = { 
    isSimple: this.props.isSimple
  }
  render() {
    const { isSimple } = this.state;
    return (
       { isSimple ? <div>simple <br /> text</div>
       : <div className="extended">extended</div>
       }
    );
  }
}
user_35569450

You can wrap the string in an object with {__html: 'your string here..'} and then use it using dangerouslySetInnerHTML props:

render() {
  var text;

  if (this.state.isSimple) {
    text = <div dangerouslySetInnerHTML={{ __html: "simple <br /> text" }} />;
  } else {
    text = <div className="extended">extended</div>;
  }
  return text;
}

Fragments doesn't support dangerouslySetInnerHTML, so I had to use div there.

class News extends React.Component {
  state = {
    isSimple: this.props.isSimple
  };
render() {
  var text;

  if (this.state.isSimple) {
    text = <div dangerouslySetInnerHTML={{ __html: "simple <br /> text" }} />;
  } else {
    text = <div className="extended">extended</div>;
  }
  return text;
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<News isSimple={true} />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

user_27677550

I think your are missing the return part of the render methods

render() { 
    var text;
    if (this.state.isSimple) {
      return <div>simple <br /> text</div>;
    } else {
      return <div className="extended">extended</div>;
    }
  }
user_30610450
Related