Skip to content
Advertisement

Conditional Component Rendering using UseState

I have a form in a page, when the user inputs the name of a new student and clicks submit, I want the content of that component (the form) to be completely replaced by the submitted name. How can I achieve this (Replace the form with the list onsubmit)?

I have read that I can use conditional rendering to toggle components, but it’s not really clear to me how i can apply it here.

StudentListResult.Jsx

JavaScript

StudentListForm

JavaScript

StudentList.jsx

JavaScript

Advertisement

Answer

So you want to show the form if not submitted and show the list if submitted? You can add a piece of state called submitted and do simple conditional rendering.

JavaScript

And then in your addStudent function, set submitted.

JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement