Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

React Guide to Props - Part II

DZone's Guide to

React Guide to Props - Part II

Learn how the component can send information to the parent via props, and how components on the same level (under the same parent) can communicate by using props.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

In the previous article, you were able to read about the basics of React props. In that article, we wrote about things like sending event handling functions as props, spread operators, and sending props with a cloning children prop. Overall, it was all the standard flow, where the parent passes the props to child components.

Today, we're spicing up the game and covering a bit more advanced themes - how the component can send information to the parent via props, and how components on the same level (under the same parent) can communicate by using props. Note that there are other, more advanced ways to realize communication between components (using more advanced ways to manage app state, like Redux), but in this article, we're talking about props only.

Note: As for all the previous articles, everything below also applies to React Native, as well!

Communication From Children to Parent

Props are passed in one direction only: from parent to children. However, this doesn't mean that the communication from children to the parent via props is impossible. It can be implemented using 'the basic flow': by passing the prop functions to children. These function props should act as callbacks.

So, let's say that we have a ChildInput component:

class ChildInput extends Component {
    ...
    handleChange = (event) => {
        // This is functional setState!
        this.setState(() => {
            const newValue = event.target.value;
            this.props.updateParent(newValue);
            return {
                value: newValue,
            }
        });
    }
    ...
    render() {
        return (
            <input
                onChange={this.handleChange}
                placeholder={this.props.placeholder}
                type="text"
                value={this.state.value}
            />
        )
    }
}

In our parent component, we get the information on value updates in input using a callback sent as an updateParent prop:

class Parent extends Component {
    ...
    saveChange = (field) => (newValue) => {
        // do something with this field's newValue
        // for this example field is "username"
        // newValue is whatever is typed into input
    }
    ...
    render() {
        return (
            <ChildInput
                placeholder={"Input field"}
                updateParent={this.saveChange("username")}
            />
        )
    }
}

So, every time the user types something in an input rendered within the ChildInput component, the state of this component will be updated to contain the new value, and the saveChange function from Parent will be called, sending that new value to the parent as well. This kind of communication is most commonly used for conditional rendering.

Of course, this callback approach can be used only when there's some event to trigger it. However, if you need to do something about the child that's not event triggered, most likely the information you need shouldn't belong to the child at all.

Communication Between Same Level Components

Direct communication between the two components that are on the same level via props is not possible. There is, however, a way, for the two same-level components to communicate via props - if these props can be contained and handled in the parents' state.

On every change in either of the two components, the parent component's state should be updated with the new information from the updating child component. As the parent's state is updated, it will automatically trigger the rerendering of both children components.

Let's say we have a TodoList component which renders items in a todo list:

class TodoList extends Component {
    render() {
        return (
            <div>
                {
                    this.props.items.map(this.renderItem)
                }
            </div>
        )
    }
}

Besides this component, we also have an AddTodo component, which should add a new todo to our list:

class AddTodo extends Component {
    ...
    addItem = () => {
        this.props.addItem(this.state.todo}
        this.setState(() => {
            return {
                todo: ''
            };
        });
    }
    ...
    render() {
        return (
            <div>
                <input
                    onChange={this.handleChange}
                    type="text"
                    value={this.state.todo}
                />
                <button
                    onClick={this.addItem}
                >
                    Add todo
                </button>
            </div>
        )
    }
}

For this to function properly, the TodoPage component will have to know about the todo list, store it and update accordingly:

class TodoPage extends Component {
    constructor() {
        super();
        this.state = {
            todoList: []
        };
    }
    ...
    addItem = (newItem) => {
        this.setState(({ todoList }) => {
            todoList.push(newItem);
            return {
                todoList,
            };
        });
    }
    ...
    render() {
        return (
            <div>
                <AddTodo
                    addItem={this.addItem}
                />
                <TodoList
                    items={this.state.todoList}
                />
            </div>
        );
    }
}

When a new todo item is added to a list, the parent will be notified about it and update the state accordingly, thus notifying the TodoList to rerender.

Let's take a look at another example, where we have a ChildInput component (the same one that appeared previously in this article!), a Button and a Form, which is a parent. So we have conditions here: if the value of the input is empty, our button should be disabled, otherwise it'll be enabled.

Here's our Button component:

class Button extends Component {
   render() {
        return (
            <button
                disabled={this.props.disabled}
            >
                { this.props.text }
            </button>
        );
    }
}

Form will know the value of ChildInput and pass it to Button whether it's disabled based on this value:

class Form extends Component {
    constructor() {
        super();
        this.state = {
            fieldValue: ""
        };
    }
    ...
    handleInputChange = (fieldValue) => {
        this.setState(() => {
            return {
                fieldValue,
            };
        });
    }
    ...
    render() {
        return (
            <div>
                <ChildInput
                    placeholder={"Form input"}
                    updateParent={this.handleInputChange}
                />
                <Button
                    disabled={!this.state.fieldValue}
                    text={"Form button"}
                />
            </div>
        );
    }
}

Keep in mind that for more complex applications, you won't be handling same-level component communication this way, but will have to use some more advanced mechanisms. We'll talk about some of these in upcoming articles.

We hope you enjoyed our article! Thank you for your time and good luck on your learning journey with one of the best JavaScript frameworks!

Part III of React props series will be coming soon. It's all about the type checking!

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web dev ,react.js ,web application development ,front-end development ,react props

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}