React Props

Now, coming into React I was super excited to see what it had in store for me but that excitement quickly fell apart when I found out about the FIRST topic, props. Props is just short for properties and props in React are used as a way to pass information from an object between React components. An example of how this is done is as follows:

COMPONENT 1:
function Name() {
const Name = "Calvin"
  return <Introduction name={Name} />;
}

COMPONENT 2:
function Introduction( {name} )
return <div>Hello, my name is {name}!</div>;

This method is pretty cool because you can pass the props down from component to component, changing it along the way to fit your needs. This is just one method of passing props that requires specific pieces of information to be passed which means it isn't flexible. To do that you'd have to write props as such:

COMPONENT 1:
function Person() {
const Name = {userInput}
  return <Introduction name={Name} />;
COMPONENT 2:
function Introduction( {name} ) {
  return <div>Hello, my name is {name}!</div>;

As you can see, you'd have to make the prop a variable of some sort and find way to have it show user input with something such as a search bar. Now, the name that you give the prop after you refer to the component you want to pass it to doesn't matter, all that matters is that in the curly brackets you have the name of the data that you want to pass to it.

One thing that actually took me a long time to understand for some reason is that props DON'T have to have the word props, they can be whatever word you want. You just have to refer to them as that set name. I'm not sure why it took me so long to figure this out but no amount of Googling helped me figure that out until I saw one example that didn't have the word props and used a relevant word instead. I specifically hope that this cleared up any confusions with the naming of props.