Props Overview in React JS: The render props are the technique is used for reusing the code in React. As per React documentation, ” a component of render prop considers the function and returns a react element and calling it without implementing its own render logic.” To understand this application to render props concept for a few examples.
The Render Props Pattern in React JS
In this render props, you will pass render function to the component which returns a React element. The other component is used to define render function and receive component provides what passes through the render function.
The Render Props Pattern Example
class BaseComponent extends Component {
render() {
return <Fragment>{this.props.render()}</Fragment>;
}
}
For example, the App is a gift box that is on the top. Consider the box is the component that we will create and open it where we expose the props, states, functions, and methods are used to make work and it is done by render().
The component in a render function has all the JSX and which helps to form the DOM for the component. this .props.render(), specifies the component that gets passed by props.
Props Example
Creating a counter- Here we create counterexample which increases and decreases the value depends on the button pressed. First, we will create a component that is used to wrap the initial states, methods, and rendering. So, hence it is called Wrapper.
class Wrapper extends Component {
state = {
count: 0
};
// Increase count
increment = () => {
const { count } = this.state;
return this.setState({ count: count + 1 });
};
// Decrease count
decrement = () => {
const { count } = this.state;
return this.setState({ count: count - 1 });
};
render() {
const { count } = this.state;
return (
<div>
{this.props.render({
increment: this.increment,
decrement: this.decrement,
count: count
})}
</div>
);
}
}
The Wrapper component is used to provide the methods and state which should be exposed to the wrapped component. In the above example, we used to increment and decrement methods which either increase or decrease the count when the method triggered and we set the counter value as 0(zero). If you observe the return() method you will understand the use of this.props.render(). When we pass methods and state to the Wrapper component so the component gets wrapped and makes use it.
App Component Example
For the App component, the component should be like,
class App extends React.Component {
render() {
return (
<Wrapper
render={({ increment, decrement, count }) => (
<div>
<div>
<h3>Render Props Counter</h3>
</div>
<div>
<p>{count}</p>
<button onClick={() => increment()}>Increment</button>
<button onClick={() => decrement()}>Decrement</button>
</div>
</div>
)}
/>
);
}
}
Example to create Data List
Creating a data list- Creating the component which handles a list of data from an API. Here we use the wrapper component which can pass the source link for the data to render it, then the GET request is used to get data.
class Wrapper extends React.Component {
state = {
isLoading: true,
error: null,
list: []
};
fetchData() {
axios.get(this.props.link)
.then((response) => {
this.setState({
list: response.data,
isLoading: false
});
})
catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
this.setState({ isLoading: true }, this.fetchData);
}
render() {
return this.props.render(this.state);
}
}
Here the data link passed as props to Wrapper component and then we get a response from the server after that we update the list from server and request made for component mounts.
How to use Wrapper?
class App extends React.Component {
render() {
return (
<Wrapper
link="https://jsonplaceholder.typicode.com/users"
render={({ list, isLoading, error }) => (
<div>
<h2>Random Users</h2>
{error ? <p>{error.message}</p> : null}
{isLoading ? (
<h2>Loading...</h2>
) : (
<ul>{list.map(user => <li key={user.id}>{user.name}</li>)}</ul>
)}
</div>
)}
/>
);
}
}
Here the link is passed as a prop, to get the state of Wrapper component that is rendered by using the ES6 de-structuring. First, the components get load and display by loading text, and we get responses and data from the server are replaced by the list.
Functional Stateless Component Example
The App component we used is a class component that does not manage state and gets transform into a functional stateless component.
const App = () => {
return (
<Wrapper
link="https://jsonplaceholder.typicode.com/users"
render={({ list, isLoading, error }) => (
<div>
<h2>Random Users</h2>
{error ? <p>{error.message}</p> : null}
{isLoading ? (
<h2>Loading...</h2>
) : (
<ul>{list.map(user => <li key={user.id}>{user.name}</li>)}</ul>
)}
</div>
)}
/>
);
}