'Data not displayed properly for simple conversion of Data to Link

I have following code snippet


class ListFeatures extends React.Component {
    state={
        data_received:[]
    }
    componentDidMount(){
        Client.fetchFeatures(data_received => {
            this.setState({
                data_received: data_received
            });
          })
    }


    render(){
      console.log("Received data2",this.state.data_received)
      const data_displayed=this.state.data_received
      if (Object.keys(data_displayed).length!==0)
      {
       for (let x in data_displayed){
         console.log("In for loop")
         console.log("The x is ",x)
         console.log(data_displayed[x])
         let temp=data_displayed[x]['name']
         console.log("temp is", temp)
         let temp_str="<Link to=/"+temp+">"+temp+"</Link>"
         console.log("temporary string is",temp_str)
         data_displayed[x]['name']=temp_str
         console.log("data after",data_displayed[x])
         console.log("2 temporary string is",temp_str)
        }
      }

The data displayed is weird. The concatenation is done twice even though I want it just for once. enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source