Props Vs State

kizadek — Mon, 14 Feb 2022 09:03:34 +0000

PROPS VS STATE
Props :: are used to pass data from one component to another and
State :: is a local data storage that is local to the component only and cannot be passed to another components
(i.e)

PROPS
(short for "properties") are read only. arbitrary inputs of a react component accepted as first argument to react component.

React is a component-based library
which divides the UI into little reusable pieces. In some cases known as component's, those components need to communicate (send data to each other) and the way to pass data between components is by using props.
for example
when u want to pass or (send) some data to a child component from the parent component then your child component access that data as props
the data can be anything from

functions,variables,strings,arrys.....

But the important part here is that data with props is passed in a uni-directional flow. (one way from parent to child)

Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.

class ParentComponent extends Component {     
    render() {     
        return (         
            <ChildComponent name="First Child" />     
        );   
    } 
} 

const ChildComponent = (props) => {     
    return <p>{props.name}</p>;  
};

Firstly, we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.

<ChildComponent name="First Child" />

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

const ChildComponent = (props) => {   
  // statements 
};

And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;

some points to take note

-Props are input value to components.
-Props are data passed down from a parent component to a child component. A child component can never send a prop back to the parent component.
-Props are read-only components that must be kept pure in other words, Props are immutable.
-It passes custom data to your component and trigger state changes.
-Props are the best way to pass data from one to another component.

Props are nothing but properties used as arbitrary input in react. They are like all the arbitrary inputs you declare in one component but want to use it in other components. For example you declare a function in component A but want to use in component B and C, you store the function as props and call it inside other components by referring to that. Otherwise you can directly declare the function you want to use in the second component and use it inside that component

I hope you find this helpful!
the next part will finish with start happy coding

DEV Community: kizadek

Props Vs State