Following these guidelines creates a render function for the ListContainer that looks likeNext we need to create our ListEntryInput component and then a ListEntry component so React doesn’t run into errors when trying to render.The ListEntryInput component will be pretty straightforward, it needs to maintain state, update state when a user types in the title for a new list, and reset state when a user creates a new list..Just like with previous components, React needs to be imported and let’s also import Button, Input, and List from Semantic..The Button will be used to allow a user to submit a new list to the Rails API, Input will be used to allow user input, and List will allow this component to display seamlessly since its parent component has this component in a list.In order for the Button to be used as a submit button, it will need an event handler for when a user clicks on it..Thankfully the parent component passed this component a handleAddList function for just this purpose, so when a user clicks the button this function will be called and passed the component’s state and then a function to reset the state will be called.The Input needs to have a function called whenever the user edits the field in order for the component’s state to be an accurate representation of what the user has entered and have its value be the current state so the user can see what has been entered/delete from the field.In order for the component to maintain state, it needs to be initialized in the constructor function..Based on our backend List model, we need to include a title, status and user_id..The user_id will default to 1 since that is going to be the ‘guest’ account users can access if they want to test the application before creating an account..User authentication will be added at a later stage, so this will be edited in the future.The function to handle user input accepts an event as input, which in this case will be the onChange event whose target is the Input field..This function will update the component’s state by using React’s built in function setState.Similar to the handleListUpdate function, the handleClear function will use React’s built in function setState to reset the component’s state.Putting all these parts together creates a component that looks likeFor our ListEntry component, we are going to start with our imports and the structure of our class so it can be exported and used in other components..The skeleton of our ListEntry looks like the belowIn order to have this component use state to store the list’s items, state needs to be initialized in the constructor function..Once the constructor function has been created, three additional functions can be added to get the list_items and add them to the component’s state..The first function will be React’s componentDidMount(), which will then call a function to GET the data from the Rails API endpoint..The getListItems() will access the component’s props to access the id of the current list to ensure the correct list_items are added to state.. More details