CODEWITHSUNDEEP
reactjs
Anthony
Anthony

Reputation: 25

Add multiple JSX/HTML elements if condition is true

I am using an API for weather. In my case if temperature is less than 10 degrees I want to add some HTML elements. <i class="rain"></i> The i tag has to be printed 150 times

              Here is my condition:
              render() {
                 return (
                    {items.current.temp_c <10 ? "Print 150 <i></i>" : ""}
                 )
              }

Upvotes: 0

Views: 42

Answers (3)

aquinq
aquinq

Reputation: 1448

You need to use className instead of class. Also, with no children, i should be a self-closing tag.

render() {
  return (
    items.current.temp_c < 10 
      ? Array.from(Array(150), () => (<i className={'rain'} />));
      : null;
  );
}

Upvotes: 1

Alx Rodav
Alx Rodav

Reputation: 609

render() {
  return (
     current < 10 ? [...new Array(150).keys()].map(i => <i key={i} className="rain"></i>) : <p>NADA</p>
  )
}

Upvotes: 0

Anh Tuan
Anh Tuan

Reputation: 1143

              render() {
                 return (
                    {items.current.temp_c < 10 && Array.from({length: 150}, (e, i) => i + 1).map((item) => <i key={item}></i>)};
                 )
              }

try to make a array with 150 element then map it

Upvotes: 1

Related Questions