DEV Community

Cover image for What's the Deal With React Components and Props?
Jasec
Jasec

Posted on

What's the Deal With React Components and Props?

#react

When you start working with React you'll notice independent pieces of UI that work in isolation and they can be reusable, these pieces are called components.

What are Components?

Components are like functions in JavaScript that take props(short for properties) and return HTML specifically JSX that tells react what should be displayed on the screen.

Nowadays developers use functional components but in older React applications you can still find class components. The switch from Class components to Functional began with ES6, which introduced arrow functions, making functional components more concise then in 2019, with the release of React Hooks, functional components were better for handling state and side effect, basically replacing Class components.

Here's an example of class components and functional components equivalent:

//Class Component
class Hello extends React.Component {
  render() {
    return <h2>Hi, my name is Joe!</h2>;
  }
}
Enter fullscreen mode Exit fullscreen mode 
//Functional Component
function Hello() {
  return <h2>Hi, my name is Joe!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello />);
Enter fullscreen mode Exit fullscreen mode

In this example, the Hello component returns an "h2" element. The root.render() method then displays the component inside the HTML element with the ID root. This is how we render a component in React.

However, we can make components more dynamic and reusable by using props to pass data to them.

Props

Props are like attributes that work as arguments in JavaScript functions helping your components to be more dynamic and helpful to pass data between them.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="Nicky" />);
Enter fullscreen mode Exit fullscreen mode

As we can see in this example, props make the Greeting component more flexible and reusable. Instead of hardcoding the name, we can render <Greeting name="Bob" /> or any other name without creating a separate component.

Even though using props.name works fine there are better ways to use props in a cleaner way by using JavaScript destructuring.

In my current project, I passed props from a parent component called PlayerList to a child component called PlayerDetails. This allowed me to display a list of players dynamically.



function PlayerList({players}){
    return(
        <div className="card">
            {players.map((player) => (
                <PlayerDetails key={player.id} 
                id={player.id} 
                name={player.name} 
                team={player.team} 
                position={player.position}
                image={player.image}/> 
            ))}
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Here, PlayerList receives an array of players as a prop and uses .map() to render a PlayerDetails component for each one. Each PlayerDetails receives individual props like name, team, position, and image, making it reusable for any player in the list.


function PlayerDetails({id, name, team, position, image}){
    return(
        <div className="details">
            <br/>
            <img src={image} alt={name} className="player-image"/>
            <h2>{name}</h2>
            <p>Team: {team}</p>
            <p>Position: {position}</p>
            <Link to={`/players/${id}/notes`}>View Performance Notes
</Link>
        </div>
    )
};
Enter fullscreen mode Exit fullscreen mode

Components and props are important tools in React that helps us break our UI in small reusable pieces and pass information between them, this is vital for building complex applications.

Top comments (0)