Using this code i can toggle `Continue reading` `Read less`, but it works for all items. 

How can i **toggle each item in the list separately** ?

[**CODEPEN**](https://codepen.io/muscaiu/pen/PKxVpw?editors=1111)

JS

```
handleReadMoreClick(item_id) {
    console.log(item_id)
    this.setState({ readMore: !this.state.readMore })
}

render(....
  let { readMore } = this.state

    <span key={item.id}>
        <p>{item.title}</p>
        <p>{item.date}</p>
        <p className={readMore ? "read-more" : "read-less"}>{item.text}</p>
        <p onClick={() => { this.handleReadMoreClick(item.id) }}>
            {
                readMore ? 
                <strong>Show less</strong>:
                <strong>Continue reading</strong>
            }
        </p>
    </span>

```

CSS

```
    .read-more{
        height: auto;
    }
    .read-less{
        height: 60px;
        overflow: hidden;
    }

```