How to create dynamic components in React
A developer may want to build applications with dynamic and aesthetically pleasing user interfaces. One such application is the JavaScript library, React. In this Answer, we'll learn how to make a dynamic counter component in React.
What is React?
React is a client-side JavaScript library for building single-page dynamic user interfaces. In React, everything is rendered as a component, allowing for the reuse of components created. For example, a component is created just once and re-used throughout the application where it is needed.
What are React components?
A React component is a piece of independent and reusable code, similar to JavaScript functions (which are reusable). Components are the building blocks of a React application, and they are created and rendered based on requirements. In React, a component either holds data (has a state), or receives data through props.
When working with React applications, always think of components because they are the foundation of all React applications, allowing them to be dynamic through props, state, and even event handlers. There are two types of components in React.
Functional components (stateless components)
Class component (stateful components)
In this Answer, we'll work with functional components. To build components in React, two main concepts must be understood, as they form the foundation of any React application.
Props
State
Props
Props are a short form for properties, and they simply refer to the internal data of a React component. Props are the initial values that are passed to a component. Props can be passed as attributes to components in JSX, and we receive the props as arguments within the component, just like parameters and arguments passed to a function in JavaScript. Passing props to components is an excellent way to pass values around in the application dynamically. Props are immutable in React.
State
Applications in React are built around the component state and heavily rely on it as well. A State is a collection of data that is managed by a component. A component's state is a property that can change in the future. It is a variable declared within a component we want to keep track of. The useState() utility, a hook provided by React, is used to manage the state in functional components.
Example 1
Let's create a simple component named Comp that we can re-use throughout the application where it is needed.
import React from 'react'
const Comp = () => {
return (
<div>Here, we add our code.</div>
)
}
export default CompExample 2
In the code below, the Greet component was created in the application, and prop values name and teamTitle are passed to the App component, where the prop attributes Godswill and Team Lead are called.
import React from 'react';
const Greet = ({ name, teamTitle }) => {
return (
<div>
Hello, {name} a.k.a. {teamTitle}
</div>
);
};
export default Greet;In this application shown above:
The
Greetcomponent is rendered in theAppcomponentThe state is handled when the user clicks on the button, changing the name from Godswill to Eche.
Example 3
Let's build a simple counter application that will use props to pass values and state to handle changes. To get started, we will create a Counter component and render it in the App component.
import React from 'react'
const Counter = () => {
return (
<div>Counter</div>
)
}
export default CounterIn Counter.js file, a title props is created using the h1 tag that's passed as an attribute to the rendered Counter component in App.js. Two buttons are also created for increment and decrement of the counter.
import { React } from 'react';
const Counter = ({ title }) => {
return (
<div>
<h1>{title}</h1>
<button>-</button>
<span>0</span>
<button>+</button>
</div>
);
};
export default Counter;React useState() hook and event listeners are used in order to make the component dynamic. So when the increment or decrement button is clicked, the counter gets updated. The useState() hook is a function that has two values, the initial counter value which is the current state of every single iteration in the render() function, and the setCounter() function which allows us to update the current state.
import { React, useState } from 'react';
const Counter = ({ title }) => {
const [counter, setCounter] = useState(0);
function decrementCount() {
setCounter((prevCounter) => prevCounter - 1);
}
function incrementCount() {
setCounter((prevCounter) => prevCounter + 1);
}
return (
<div>
<h1>{title}</h1>
<button onClick={decrementCount}>-</button>
<span>{counter}</span>
<button onClick={incrementCount}>+</button>
</div>
);
};
export default Counter;The setCounter() function is passed into the decrementCount() and incrementCount() functions. Then, those functions are passed into the onClick() events that either increase or decrease the counter based on the button that is clicked.
