Post

DEV Community [Unofficial]
@dev.to.web.brid.gy
dev.toReact has Two Kinds of DataImagine a shopping website that has the cart counter icon in the navbar, on the checkout button and the mini cart dropdown. Now imagine if whenever you add a another item to the cart, you'd have to go everywhere to update it to make sure the counter increases in all the places it was used. Luckily, this problem is one that has been solved about 13 years ago by the developers at meta. The developers have of course long built the java script framework from which we have built numerous platforms called React. In react the UI we see is actually simply a function of the data that is in it. So whenever this data changes the function or component re-renders itself and displays the updated UI that was influenced by the new data. React makes use of two types of data namely; props and state. A prop is like the whooping given to you by your parents. It is data passed down from a parent to a child. Just like a whooping the child is unable to change the what this whooping does. This goes to emphasize how immutable props are(from the child component). Pops can also be a function and not just data. This particular data type helps a user t trace where whatever said users sees as their UI. So when said user gets to the parent they are able to make the changes they'd like to. Here is an example of props being passed from parent to child: export function Parent ({name, age}) => { return ( <div> <h1>My name is {name}</h1> <p>I am {age} years old</p> </div> ) } const Child = () => { return ( <Parent name={sarah} age={10} /> ) } Another data type which is likely the complete opposite of props is state. A state is data owned by a particular component. It is data which the said component is able to change and trigger. A s tate comes along with a function for setting said state. A state cannot be shared with other components( such as a child component). Here is an example of state: export function counter () { const [count, setCount ] = useState(0); return ( <div> <button></button> </div> ) }

0 reposts0 likes

No replies yet.