Now it's time to put together what we learned so far to build together a big project. We'll start with thinking about UI structure while being in the right React mindset
App.jsx
class App extends React.Component {
constructor() {
super();
this.state = {
username: "Lenny",
list: data.music,
formVisible: false
};
}
...
render() {
return (
<div>
<Header />
<div className="options">
<button onClick={this.showForm}>NEW SONG</button>
</div>
<SongList
name={`${this.state.username}'s list`}
list={this.state.list}
/>
</div>
);
}
This is similar to the Memes view we saw before. The only difference is that we're getting it from a JSON
file instead of an API. The list is rendered to SongList
which maps songs to Song
components and displays it in a grid.
SongForm.jsx
class SongForm extends React.Component {
constructor(props) {
super(props);
this.state = {
id: "",
title: "",
artist: "",
album: ""
};
}
...
We have a state value for each of the form inputs