React State vs Props explained – codeburst

  • Let me define a React component a plain javascript function side by side.class DummyComponent extends React.Component { render () { return divHey/div }}const DummyFunction = () = console.log(‘Hey’)We defined a React component named DummyComponent and returned a div containing text Hey similarly, we defined a function named DummyFunction and output…
  • Let’s take a look at State.React Component StateA state in React Component is its own local state, the state cannot be accessed and modified outside the component and can only be used inside the component which is very similar to, you already guessed it a function own local scope.
  • Let’s demonstrate this with an example.class DummyComponent extends React.Component { state = { name: ‘Manoj’ } render() { return divHello {this.state.name}/div; } }const DummyFunction = () = { let name = ‘Manoj’; console.log(`Hey ${name}`)}As you can see a component state can be compared to a function local scope.
  • Let’s take a look how we can use props in react.class DummyComponent extends React.Component { render() { return divHello {this.props.name}/div; } }// when using the componentDummyComponent name=”Manoj” /DummyComponent name=”Ajay” /We used one react component in multiple places here but with a different name.
  • Props, on the other hand,make components reusable by giving components the ability to receive data from the parent component in the form of props.We also get to know that React components are pretty similar to normal JS functions so from the next time keep this thing in mind 😉 .

Before jumping to state vs props we have to compare a React component with a javascript plain function. Let me define a React component & a plain javascript function side by side. We defined a React…
Continue reading “React State vs Props explained – codeburst”