React Programming Patterns
Related learning
- Build powerful interactive applications with this popular JavaScript library.
- Intermediate.3 hours
- In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.
- Intermediate.13 hours
Stateful and Stateless Components
In React, astateful component is a component that holds some state.Stateless components, by contrast, have no state. Note that both types of components can use props.
In the example, there are two React components. TheStore component is stateful and theWeek component is stateless.
functionStore(){const[sell, setSell]=useState("anything");return<h1>I'm selling{sell}.</h1>;}functionWeek(props){return<h1>Today is{props.day}!</h1>;}
React Programming Pattern
One of the most common programming patterns in React is to use stateful parent components to maintain their own state and pass it down to one or more stateless child components as props. The example code shows a basic example.
// This is a stateless child component.functionBabyYoda(props){return<h2>I am{props.name}!</h2>;}// This is a stateful Parent element.functionYoda(){const[ name, setName]=useState("Toyoda")// The child component will render information passed down from the parent component.return<BabyYoda name={name}/>;}
Changing Props and State
In React, a component should never change its own props directly. A parent component should change them.
State, on the other hand, is the opposite of props: a component keeps track of its own state and can change it at any time.
The example code shows a component that accepts a prop,subtitle, which never changes. It also has a state object which does change.
functionClock(props){const[ date, setDate]=useState(newDate());constupdateTime=()=>{setDate(newDate());}return(<div><h1>It is currently{date.toLocaleTimeString()}</h1><h2>{props.subtitle}</h2><button onClick={updateTime}>Update the clock</button></div>);}
Passing State Change Functions as Props
If a React parent component defines a function that changes its state, that function can be passed to a child component and called within the component to updating the parent component’s state.
In this example, becausethis.setState() causes theName component to re-render, any change to the<input> will update theName component’s state, causing a new render and displaying the new state value to the<p> tag content.
functionName(){const[name, setName]=useState('');consthandleNameChange=(e)=>{setName(e.target.value);}return(<div><input onChange={handleNameChange}/><p>{name}</p></div>);}
Event Handlers and State in React
Event handler functions in React are often used to update state. These handler functions often receive an event as an argument, which is used to update state values correctly.
In the example code, we useevent.target.value to get the input’s value.
functionMyComponent(){const[ text, setText]=useState("");consthandleChange(event)=>{setText(event.target.value);}return(<div><input onChange={handleChange} value={text}/><p>You typed{text}</p></div>);}
Presentational and Container Components
A common programming pattern in React is to have presentational and container components. Container components contain business logic (methods) and handle state. Presentational components render that behavior and state to the user.
In the example code,CounterContainer is a container component andCounter is a presentational component.
classCounterContainerextendsReact.Component{constructor(props){super(props);this.state={count:0};this.increment=this.increment.bind(this);}increment(){this.setState((oldState)=>{return{count: oldState.count+1};});}render(){return<Counter count={this.state.count} increment={this.increment}/>;}}classCounterextendsReact.Component{render(){return(<div><p>The count is{this.props.count}.</p><button onClick={this.props.increment}>Add1</button></div>);}}
Learn more on Codecademy
- Build powerful interactive applications with this popular JavaScript library.
- Intermediate.3 hours
- In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.
- Intermediate.13 hours