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…

React State vs Props explainedCompare React components to plain functionsMost often developers who are React newbie asks me What’s the difference between State Props?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.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 Hey to the console. Isn’t they look a lot similar ? they both generate the same output write Hey to the output the only difference between the two is the React component going to render a div with text Hey where the function going to output Hey on the console.So we now Know that React components are very similar to Plain Javascript functions. 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. We can define variables inside the function which can only be used inside the function block 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 =…

React State vs Props explained – codeburst