ReactJS JSX Syntax for If-Else

Question

I have the following jsx code, I am trying to put some code out of the mapping function, but getting errors with the jsx syntax, I want this block displayed only if there is some data..

{this.props.someData ? 
  <div className="container">
    <h3>Heading</h3>
    <div className="block1">
      <button>one</button>
      <buttontwo</button>
    </div>  
    this.props.someData.map((response, index) => {
      return ( 
        <div className="Block2">  
          <div key={index}>
            <span>{response.number}</span>
          </div>
        </div>  
      </div> 
    );
}) : ''}

If one of the answers is correct, click the empty check mark next to the answer to mark it correct. Otherwise, refine the question. — Andy Ray
– Andy Ray, Commented Dec 11, 2016 at 21:06

Mayank Shukla · Accepted Answer · 2017-08-17 05:42:56Z

1

Write it like this:

{this.props.someData ? 
     <div className="container">
          <h3>Heading</h3>
          <div className="block1">
              <button>one</button>
              <buttontwo</button>
          </div>  
          {this.props.someData.map((response, index) => {
              return ( 
                 <div className="Block2">  
                    <div key={index}>
                     <span>{response.number}</span>
                    </div>
                 </div>
              )})
           }
     </div> 
: <div/>}

Mistake you are doing:

To render any js code inside html elements, {} is required, since you are rendering JSX if the condition is true and inside that using map so put map function inside {}, it will work.

edited Aug 17, 2017 at 5:42

answered Dec 11, 2016 at 18:35

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy Ray · Accepted Answer · 2016-12-11 18:15:20Z

You should be able to add a child { wrapping your map. You have a few other errors as well. You were cosing your tags and braces too early. Additionally, an "empty" JSX element should return null, not empty string. You also have broken syntax with no closing > here: <buttontwo</button>

Using a code editor that provides syntax highlighting, and using consistent spacing, and always using eslint to check for errors, will help prevent the need to come to StackOverflow and blocking your programming on syntax questions.

{this.props.someData ?
    <div className="container">
        <h3>Heading</h3>
        <div className="block1">
            <button>one</button>
            <button>two</button>
        </div>
        { this.props.someData.map((response, index) => {
            return (
                <div className="Block2">
                    <div key={index}>
                        <span>{response.number}</span>
                    </div>
                </div>
            );
        }) }
    </div> : null}

martinarroyo · Accepted Answer · 2016-12-11 18:20:46Z

0

If I get your meaning correctly, I think this would do:

 {this.props.someData &&  
  (<div className="container">
    <h3>Heading</h3>
    <div className="block1">
      <button>one</button>
      <buttontwo</button>
    </div>  
    {this.props.someData.map((response, index) => {
      return ( 
        <div className="Block2">  
          <div key={index}>
            <span>{response.number}</span>
          </div>
        </div> 
      );
    })}
  </div>) 
}

I'd recommend you to have a look at the conditional rendering section of the documentation.

edited Dec 11, 2016 at 18:20

answered Dec 11, 2016 at 18:15

martinarroyo

9,7713 gold badges42 silver badges79 bronze badges

Collectives™ on Stack Overflow

ReactJS JSX Syntax for If-Else

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related