DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. React Guide to Props - Part I

React Guide to Props - Part I

In this post, an intrepid web developer guides us safely through the complex terrain of props in the React framework. Tally-ho!

Kristina Grujic user avatar by
Kristina Grujic
·
Mar. 02, 18 · Tutorial
Like (4)
Save
Tweet
Share
18.25K Views

Join the DZone community and get the full member experience.

Join For Free

Disclaimer: This was intended to be part III of React JSX series, but as for props there's a lot to be covered, so we have decided to divide it into a subseries!

In some of our previous articles, you had the opportunity to read about JSX specific stuff, like how to render content in loops and how to do conditional rendering in React.

Today, you will learn how props function. However, before we move to actual prop usage examples, you must first understand the difference between state, props, and refs. Once you know what these are, everything will be a lot easier. Here's a short explanation:

The state is similar to attributes in object-oriented programming: it's something local to a class (component), used to better describe it. We'll cover React state management and what should be kept in the local state in another article.

Props are like parameters - they are passed to a component from the caller of a component (the parent): as if you called a function with certain parameters.

Refs are, as the name suggests, references to nested components (children), used for functionality like triggering of focus or an animation. However, they shouldn't be used too much, as the most proper way to communicate between the components is via props.

Now that we have covered all the basic differences, we can start with the prop passing!

All of the below applies to React Native as well!

Passing Props - the Standard Way

Passing props is pretty straightforward: you send a prop by specifying the name under which will it be available in a child component and defining what the prop should equal:

render() {
    return (
        <Child
            propName={propValue}
        />
    )
}

Here is a more realistic example:

render() {
    // strings don't have to be wrapped with {},
    // but it's better to get used to wrapping everything
    return (
        <Movie
            actors={[
                ...
            ]}
            details={{
                director: "Director name",
                ...
            }}
            duration={120}
            released={true}
            title={"Movie title"}
        />
    )
}

That's basically it for sending a prop! Below you'll find some more specific props you'll definitely be using at some point when coding in React!

Boolean Props

If you want to pass a true value as a prop, you can do it like this:

render() {
    // No need for "released={true}"!
    return (
        <Movie
            released
        />
    )
}

In the same manner, if you want to pass a false value, you can do it by just not passing anything at all:

render() {
    // This will work the same way as if you passed "released={false}"!
    return (
        <Movie />
    )
}

If the boolean value is contained within a variable, then, of course, you'll have to pass it.

render() {
    let booleanVariable = true; // this will often be calculated
    return (
        <Movie
            released={booleanVariable}
        />
    )
}

You can directly calculate the value of a prop when passing it, as well:

render() {
    return (
        <Movie
            released={value1===value2}
        />
    )
}

Just keep in mind that it should be clear what's happening in the code, if the expression is too long, move it above the return statement or even to a separate function:

isFormValid() {
    // various checks, whether every form field is of correct format
}
render() {
    return (
        <Form
            disabled={!this.isFormValid()}
            fields={this.state.fields}
        />
    )
}

Function Props

Often, you'll have to pass functions and event handlers as props. The functions you pass need to be bound to the component context. However, don't bind functions in render methods:

handleChange(event) {
    // do something here
}

render() {
    return (
        <div>
            {
                // don't do this!
            }
            <input
                onChange={this.handleChange.bind(this)}
            />
        </div>
    )
}

If you bind a function in render, everytime a component is rerendered, a new function will be created. Instead, it's the best to use the arrow syntax when defining a function (you'll need Babel configured to use ES6 syntax!).

handleChange = (event) => {
    // do something here
}

render() {
    return (
        <div>
            <input
                onChange={this.handleChange}
            />
        </div>
    )
}

You might be thinking: that's fine when there are no other parameters to be passed, but what if I need to pass an attribute? Here's how to do it with arrow functions:

handleChange = (parameter1, parameter2) => (event) => {
    // do something here
}

render() {
    return (
        <div>
            <input
                onChange={this.handleChange(parameter1, parameter2)}
            />
        </div>
    )
}

Sending Props to this.props.children

Sending the props to a child component called directly in the code is pretty straightforward, but how do we send the props to children passed as a prop?

This is the way to do it:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        <div>
            { updatedChildren }
        </div>
    );
}

If your component has just one child, there's no need for mapping, so you can do this as well:

render() {
    return (
        <div>
            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        </div>
    );
}

Props and the '...'

You might have seen the three dots earlier and wondered what they mean. Code similar to the next example is quite common in React world:

render() {
    return (
        <Movie
            {...this.props}
        >
    );
}

The ... is a spread operator, and it'll send each of the key-value pairs inside of this.props as a separate prop to the Movie component. Let's say that we have an object called movie:

const movie = {
    title: "Inception",
    releaseDate: "16.07.2010",
    genre: [
        "Action", "Adventure", "Sci-Fi",
    ],
};

We should pass all of the key-value pairs from the movie object to the Movie component. Here's how we'd do it without the ...:

render() {
    return (
        <Movie
            title={movie.title}
            releaseDate={movie.releaseDate}
            genre={movie.genre}
        />
    );
}

Now, the code above can be much shorter using the three dots syntax, and work completely the same:

render() {
    return (
        <Movie {...movie} />
    );
}

However, although it's way shorter, it can get a bit messy over time, so don't overuse it! Also, keep in mind, that although the ... works as a spread operator for arrays as well, when sending props you should only use it on objects!

Thank you for your time!

Now that we've gone through the prop basics, you can make your components communicate and better understand how they do so!

This, however, is just the beginning, as there's a lot more to learn about component communication.



If you enjoyed this article and want to learn more about React, check out this collection of tutorials and articles on all things React.

React (JavaScript library)

Published at DZone with permission of Kristina Grujic, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Should You Know About Graph Database’s Scalability?
  • Top 5 PHP REST API Frameworks
  • Remote Debugging Dangers and Pitfalls
  • Top 5 Node.js REST API Frameworks

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: