Jul 20, 2020
ReactJS 02 : props, default props, state, this.setState
What are props?
Props stands for properties. They are arbitrary argument for react components. It is being used for passing data from one component to another. This way we can code dynamically.
passing in props : To pass props to a component, you add them as attributes when you render them. In parent file: <ParentComponent name={puppy.name} /> In the child’s file:<h2>{this.props.name}</h2>.
how to use props using two files, one parent file and a child component file.
What are default props?
These are default values, it’s stated outside of the class.
What are states?
States allow components to create and mutate their own data, unlike props. State stays in one file. It doesn’t pass down from parents to children like props. However, it’s more dynamic than props. It’s an object, which is a key value pair.
What is a Synthetic Event in React?
Your event handler will be passed instances of SyntheticEvent, which is a cross-browser wrapper around the browser’s native event.
Why should you use state instead of props?
Unlike props, components cannot pass data with state, but they can create and manage it internally.
Why should we use this.setState instead of mutating state directly?
setState() triggers the re-rendering process for the DOM immediately, not the whole DOM, but only the component with the updated setState. This is why React is fast. You MUST use setState to re-render your component. The direct mutation will NOT trigger a re-render.
What happens when this.setState is called?
setState(updater, [callback])
short answer: changes the original State(data)
setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
How to pass information between children components?
First we have to pass it to the parent and use call back.
