I have some issue in React that seems to keep last or old state. 
I have a parent component called MyLists.js that contain a loop function where I rendered child component called Item.js

```
{
     this.state.listProducts.map(d =>
     <Item data={d} /> 
)}

```

And in my Item.js component I set state in constructor : 

```
this.state = { showFullDescription: false }

```

The variable "showFullDescription" allows me to see the entire description of a product. Now I have for example 2 products and all states "showFullDescription" are set to false so : 

* Product 1 => (showFullDescription = false)
* Product 2 => (showFullDescription = false)
Next, I show full description for Product 2 by clicking a button and I set state to true so Product 2 => (showFullDescription = true)

The problem is when I add another product, let's call it "Product 3", the full description of "Product 3" is directly shown and for "Product 2" it is hidden. It seems that last state is reflected on "Product 3".
I am really sorry for my english, it's not my native language

Here is full source code : 
**MyLists.js**

```
import React, { Component } from 'react';
import ProductService from '../../../../services/ProductService';
import Item from './Item';

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

        this.productService = new ProductService();  
        this.productService.getAllProducts().then((res) => {
            this.setState({
                products: res
            })
        }); 
    }

    addProduct(data){
        this.productService.addProduct(data).then((res) => {
            var arr = this.state.products;
            arr.push(res);
            this.setState({
                products: arr
            })
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.products.map(d =>
                    <Item data={d} /> 
                )}
            </div>
        )
    }
}

export default MyLists;

```

**Item.js**

```
import React, { Component } from 'react';
import Truncate from 'react-truncate';

class Item extends Component {
    constructor(props) {
        super(props);  
        this.state = {
            showFullDescription: false
        } 
    }

    render() {
        return (
            <div>
                <h2>{this.props.data.title}</h2>
                {
                    !this.state.showFullDescription &&
                    <Truncate lines={10} ellipsis={<a className="btn btn-primary read-more-btn" onClick={() => this.setState({showFullDescription: true})}>Show More</a>}>
                        {this.props.data.description}
                    </Truncate> 
                )}
                {
                    this.state.showFullDescription &&
                    <span>
                        {this.props.data.description}
                    </span>
                }
            </div>
        )
    }
}

export default Item;

```