SimonLeCat SimonLeCat - 29 days ago 19
React JSX Question

How to append data in React JS

I need to append this data response example in my React app.

DATA Response

[
{
"trackInfo": {
"id": 1,
"title": "Guns & Dogs",
"artist": "Portugal, The Man",
"album": "The Satanic Satanist"
},
"trackUrl": "https://s3-us-west-2.amazonaws.com/teddarcuri.monarch/Portugal.+The+Man+-+Guns+%26+Dogs+-+The+Satanic+Satanist.mp3",
"albumArt": "http://ecx.images-amazon.com/images/I/61X7CiBpZ6L.jpg"
}
]


React JS

class App extends React.Component {
constructor(props){
super(props)
this.state = { //initial empty details
details : {}
}
}
componentDidMount(){
//place the ajax call where ever you need
$.ajax() //call ajax
.done((data) => {
this.setState({ //this setState will re render the UI with the new state
details: { //change the key value pairs as needed
id: data.id,
trackInfo: {
title: data.title,
artist: data.artist,
album: data.album,
},
trackUrl: data.trackUrl,
albumArt: data.albumArt,
}
})
})
}
render() {
if(!this.state.details.id) return false //renders nothing when no details available
return (
<div id="app">
<MusicPlayer
id={this.state.details.id}
visualizerType="RIPPLES"
theme={darkTheme}
trackInfo={this.state.details.trackInfo}
trackUrl={this.state.details.trackUrl}
albumArt={this.state.details.albumArt}
utilities={true}>
</MusicPlayer>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById("app")
);



  • Full code example here

  • Working example with preloaded data here



So my question is, how can I append the new data in React using Ajax?

A code example will be really appreciate, thanks.

Answer

I think you want to show a list of MusicPlayer, so I changed your code: [you need to read more about state in react]

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = { //initial empty details
      details : []  // use array
    }
  }
  componentDidMount(){
    //place the ajax call where ever you need
    $.ajax() //call ajax
    .done((data) => {
      let array = this.state.details;
      array = [...array, {
          id: data.id, 
          trackInfo: {
            title: data.title,
            artist: data.artist,
            album: data.album,
          },
          trackUrl: data.trackUrl,
          albumArt: data.albumArt,
      }];
      this.setState({
        details: array
      })
    })
  }
    render() {
      if(!this.state.details.id) return false //renders nothing when no details available
        return (
            <div id="app">
                {
                    this.state.details.map((detail) => {
                        return <MusicPlayer
                    id={detail.id}
                    visualizerType="RIPPLES"
                    theme={darkTheme}
                    trackInfo={detail.trackInfo}
                    trackUrl={detail.trackUrl}
                    albumArt={detail.albumArt}
                    utilities={true}>
                </MusicPlayer>
                    });
                }
                
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);

Comments