1 > 1000

1 example is greater than 1,000 words.

• W3Schools

I believe that the best way to explain something whether it's a lifecycle, component, props, or state is that you got to have a lot of examples in your arsenal that your audience can see or can relate to.

Example:

From the image given below. Here we can see a bottle of water and the water inside this is composed of two components. The first component is the lid to cover up the container which is the second component to avoid the water inside not to fall out of a container. I mentioned "composed" because of the lid and container components doesn't need to be dependent with each other. Now what do I mean with that?

Well it is simply that these 2 components can be re-use throughout the app without depending on each other, meaning they are independent components. And that's the cool thing about React!

// Lid.js
const Lid = () => <div>I am a Lid Component.</div>


// Container.js
const Container = () => <div>I am a Container Component.</div>

We can still expand on this example from above to also explain props & state.

Given that we have finish composing the 2 components mentioned above to create a water bottle container.

// WaterBottleContainer.js
class WaterBottleContainer extends React.Component {
  render() {
    return (
      <div>
        <Lid />
        <Container />
      </div>
    )
  }
}

We can now add some water inside the container and now we can treat that water as props pass by someone.

// WaterBottleContainer.js
class WaterBottleContainer extends React.Component {
  render() {
    return (
      <div>
        <Lid />
        <Container water="50 liters" />
      </div>
    )
  }
}

The process of using props is you need to have a Parent Component (WaterBottleContainer) and a Children Component (Container) relationship where the Parent Component will pass the props down the Children Component.

Now State, Hmmm...
We can apply this with the water bottle container's Lid. If the water bottle container is open then the isLidOpen state will be true.

// WaterBottleContainer.js
class WaterBottleContainer extends React.Component {

  state = {
    isLidOpen: true
  }

  render() {
    return (
      <div>
        <Lid open={isLidOpen} />
        <Container water="50 liters" />
      </div>
    )
  }
}

otherwise the isLidOpen state will be set to false. Good thing here is that we can pass the state as props using {} curly braces now don't get confused here we're not passing an object we simply just tell React that we want to pass other data type than string so we use {} curly braces.

Remember that these two (Props & State) can be partners.

// WaterBottleContainer.js
class WaterBottleContainer extends React.Component {

  state = {
    isLidOpen: false
  }

  render() {
    return (
      <div>
        <Lid open={isLidOpen} />
        <Container water="50 liters" />
      </div>
    )
  }
}

Now we can re-write our Lid.js file to receive the props from WaterBottleContainer component.

// Lid.js
const Lid = props => {
  let isOpenText = "Yes, You can add water.";

  if(!props.open) {
    isOpenText = "Nope, You can't add water.";
  }

  return (
    <div>
      {isOpenText}
    </div>
  );
}

It is important to note here that the name of the prop we use should match the name of the prop from the Parent Component. And oh yeah, to get the prop from the WaterBottleComponent we use the props object. And that's about it!

Please let me know if you have questions, suggestions, clarifications, or just want to talk.

Just place it down the comment section below or you can just send a chat message here @Dev just click the paper airplaine icon from the top right of your screen and use filter textbox to search for my username oieeaaaa.

Phheww!, Hope that makes sense. LOL

Salamat.