DEV Community 👩‍💻👨‍💻

Joe
Joe

Posted on • Updated on

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!

Water bottle

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


// Container.js
const Container = () => <div>I am a Container Component.</div>
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.