Props & Circumstance

A brief overview of props and state

We are on our final module, React, and one concept that I wasn’t able to get right away is the idea of passing down props to child components. It seemed to make sense during lecture but as we started doing the first few problem sets, I felt a bit overwhelmed by when to use this.props and the overall definition of props.

Props

Props was loosely defined in our curriculum as something like “properties” of a component that can be used to pass attributes from one component to another. As it was initially described, I interpreted it to be more analogous to defined attributes of a component (like title, description, name, etc) that were more like fixed states for a particular component. This basically means something along the lines of:

class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}

const element = <Welcome name="Rinda" />;

This example (from React Guide) basically shows that a prop can be passed to the component, similar to how an argument is passed to a function. The last line of this code displays <Welcome> being called with the name Rinda. This will render out a Welcome Rinda <h1> tag.

While the above example is pretty simple, it doesn’t show the full power of what props can do. Props, after all, can be values passed into our components that can be in the shape of anything, from a string, to an array, to functions and more. Where they get passed down as functions was where I had a little bit more difficulty grasping.

Functional Props

Because everything in JS are essentially objects, (including functions), it’s possible to pass down functions to other components using this.props. To better illustrate the power of callback functions as props, I’ll be referring to the Tic-Tac-Toe example that the React Guide provides.

Here we have a container component, Board, that contains the state of its squares, which will be some combination of X’s and O’s. The thing to pay attention to here is the handleClick() function that’s defined (and bolded).

This function changes the state of the board by toggling the “X is next” state and the array state containing the 9 squares. While this function is defined in the Board component, it won’t actually be of use until it gets passed down so that each individual square knows what to do when it’s being clicked on. This is where props come in — as can be seen on the bolded line in the renderSquare function, a Square component is being called and given a prop of onClick that’s assigned the handleClick function — by passing this down into the child component Square, the Board’s state can be appropriately changed.

 class Board extends React.Component {
constructor() {
super();
this.state = {
squares: Array(9).fill(null),
xIsNext: true,
};
}
handleClick(i) {
const squares = this.state.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)}
/>
);
}
render() {
const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}

Presentational component rendering each individual square:

function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}

Each square that’s clicked will then be able to alter the Board’s state through the props.onClick function that the board passes down to each square. When the Board’s state changes, the Square components re-render automatically.

So while props and state both hold information related to a component, they’re kept separate and used very differently.

State can be thought of as containing “private” info for the component to initialize and change.

Props are a way of passing data from parent to child and can be utilized to effectively change the state of the parent.

For additional resources and to try building out a Tic-Tac-Toe game via React, please visit: https://facebook.github.io/react/tutorial/tutorial.html

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.