React array.map returns Expected an assignment or function call and instead saw an expression

Question

I have written a very simple react component where-in I try to fetch an API from the jsonplaceholder/typicode website. I am able to successfully get the result and set it in state. Now, when I try to print those result on the screen using array.map, I get the following error

Expected an assignment or function call and instead saw an expression  no-unused-expressions

This is how the component looks like:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      result: []
     }
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts")
    .then(res=> res.json())
    .then(result=>{
      this.setState({
        result
      })
    })
  }
  
  render() { 
    return ( 
      <div>
        {this.state.result.map(post=>{
          <h1>{post.title}</h1>
        })}
      </div>
     );
  }
}

I don't understand what am I doing wrong here. Someone please have a look

Answer 1

You forgot to return

<div>
  {this.state.result.map((post) => {
    return <h1>{post.title}</h1>
  })}
</div>

Codesandbox for demo