Ytukyg

I'm new to using React. I have a series of data in which there is a button in every item and by clicking it the text of a special div must be changed, but the issue is that on clicking the button of one item, the text of the div in all items is changed. I want that when I click the button, the text of the div which is in the respected item should change.The main problem is that when second item clicked the first item text will disappear and the text of second one is the text of first one.Thank you in advance.

class App extends React.Component {

constructor(props, context) {

    super(props, context);

    this.state = {

        data: ,

        num: 0,

    };

    $.ajax({

        url: "/json.bc",

        type: "get",

        success: (result) => {

            this.setState({ data: eval(result) });

        }

    })

}

renderFlight() {

    return this.state.data.map((item, i) => {

        return (

            <div class="item">

                <div class="btn" onClick={((e) => this.rueldep(e, item, i))}>click</div>

                <div class="text">

                    {(this.state.num == i + 1) ? this.state.rueldepTxt : null}

                </div>

            </div>

        )

    })

}

rueldep = (e, item, index) => {

    var desc = item.info.departureinformation.routeshow.description

    return this.setState({

        rueldepTxt: desc,

        num: index + 1

    });

};

render() {

    return (

        <div>{this.renderFlight()}</div>

    )

} 

}

ReactDOM.render(<App />, document.getElementById('Result'));