First i have drafted the project and hard coded all the values and i planned to use Material-Ui wich will make the work easy for stayling the compoents.Then i planned to take the values which user is writing in input field and save them somewhere, to turn uncontrol form to control form.And then i planned to create new component to render the lists.that time i needed somehow to have access to the values which user inputed i passed them throw props to another component from where i can work with them.Once i got the new input i set to my created array list.So then later i can loop throw the array and print each of the elements.

To get access to value from input filed from another component

For small projects i guess its okay to use props as we dont have to many components, i think it was easiest way for me to get it done this way.

To useContex API or somekind of state managment where we can have access to data from all part of our application