score:1

Accepted answer

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>
  )
}

Related Query

More Query from same tag