Cannot conditional render in render method react js

Question

constructor(props) {
  super(props);
  this.submitQA = this.submitQA.bind(this);
  this.onSearchChange = this.onSearchChange.bind(this);
  this.isSearched = this.isSearched.bind(this);
  this.answerSubmitted = this.answerSubmitted.bind(this);
  this.reset = this.reset.bind(this);
  this.state = {
    answers: [],
    answer: '',
    searchTerm: '',
  }
}

reset() {
  console.log("reset");
}

render() {
  const answer = true;
  return (
    <div className="App">
      <div className="center">

        <form >
        Search:  <input type="text" onChange={this.onSearchChange}  /><br/>
        </form>

        <form onSubmit={this.submitQA}>
          Q & A:
          <input type="text" placeholder=" Course/Q/A"/>
          <button type="submit"> Submit </button>
        </form>
        <span>{basicFormat}</span>
      </div>

      {
        this.state.answers.filter(this.isSearched(this.state.searchTerm)).map((item) => {
          return (
            if(answer) {
              this.reset;
            }
            <div>
              <form  onSubmit={this.answerSubmitted}>
                <text> {item} </text>
                <input type="text" placeholder="answer the question"/>
              </form>
            </div>
          )
        })
      }
    </div>
  );
}

Why can't I use any logic in this render method? Keeps giving me unexpected token. Do not see anything wrong with it. Looked at some tutorials and they are doing the exact same thing but why is mine throwing me an error?

cbr · Accepted Answer · 2017-06-18 20:21:53Z

You've included a Javascript if statement inside the return, mixed with the JSX. Quoting the React documentation:

if statements and for loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code.

To fix the unexpected token error, move the if statement before the return:

{
  this.state.answers.filter(this.isSearched(this.state.searchTerm)).map((item) => {
    if(answer) {
      this.reset();
    }
    return (
      <div>
        <form  onSubmit={this.answerSubmitted}>
          <text> {item} </text>
          <input type="text" placeholder="answer the question"/>
        </form>
      </div>
    )
  })
}

I would also recommend that you perform the mapping before the return in the render function. That way, the rendering is more clearly separated from the data manipulation.

render() {
  const answer = true;
  const answerForms = this.state.answers
    .filter(this.isSearched(this.state.searchTerm))
    .map((item) => {
      if (answer) {
        this.reset()
      }
      return (
        <div>
          <form onSubmit={this.answerSubmitted}>
            <text> {item} </text>
            <input type="text" placeholder="answer the question" />
          </form>
        </div>
      )
    })

  return (
    <div className="App">
      <div className="center">
        <form >
          Search:  <input type="text" onChange={this.onSearchChange} /><br />
        </form>
        <form onSubmit={this.submitQA}>
          Q & A:
          <input type="text" placeholder=" Course/Q/A" />
          <button type="submit"> Submit </button>
        </form>
        <span>{basicFormat}</span>
      </div>
      {answerForms}
    </div>
  )
}

Collectives™ on Stack Overflow

Cannot conditional render in render method react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related