Languages
[Edit]
EN

React - how to pass props to react components (class component)

0 points
Created by:
Elias999
759

In this article, we would like to show you different ways how to pass props into class components in React.

Values can be passed as props using:

  1. single or double apostrophes syntax ('' or "") - that let us use only string values,
  2. curly brackets syntax ({}) that let us pass:
    • values with different types,
    • variables,
  3. spread syntax (...) that reduces the time needed to create a new component - read more about spread syntax here.

1. Single or double apostrophes example

JSX lets us use '' or "" when we pass props values. The main idea of this approach is to simplify string-valued props usage.

So component creation should look like:

<User name="Kate" age="25" />

Practical example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

class User extends React.Component {
  render() {
    return (
      <div>
        <span>{this.props.name} ({typeof this.props.name})</span>,{' '}
        <span>{this.props.age} ({typeof this.props.age})</span>
      </div>
    )
  }
};

class App extends React.Component {
  render() {
    return (
      <div>
        <User name="Kate" age="25" />
      </div>
    );
  }
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

2. Curly brackets example

That approach lets us pass values with different types as props. Each prop can get value from literal or some variable.

So component creation should look like:

// const admin = { name: 'Tom', age: 30 };

<User name="John" age={25} />
<User name="Chris" age={'25'} />
<User name={admin.name} age={admin.age} />

Where age={'25'} is equal to age="25" syntax.

Practical example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

class User extends React.Component {
  render() {
    return (
      <div>
        <span>{this.props.name} ({typeof this.props.name})</span>,{' '}
        <span>{this.props.age} ({typeof this.props.age})</span>
      </div>
    )
  }
};

class App extends React.Component {
  render() {
    const admin = { name: 'Tom', age: 30 };
    return (
      <div className="App">
        <User name="John" age={25} />
        <User name="Chris" age={'25'} />
        <User name={admin.name} age={admin.age} />
      </div>
    );
  }
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

3. Spread syntax example

That approach lets us avoid typing many object props one by one and pass them using one operation.

So component creation should look like:

// const admin = { name: 'Tom', age: 30 };

<User {...admin} />

Practical example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

class User extends React.Component {
  render() {
    return (
      <div>
        <span>{this.props.name} ({typeof this.props.name})</span>,{' '}
        <span>{this.props.age} ({typeof this.props.age})</span>
      </div>
    )
  }
};

class App extends React.Component {
  render() {
    const admin = { name: 'Tom', age: 30 };
    return (
      <div>
        <User {...admin} />
      </div>
    );
  }
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Note:

Go to this article to see functional component example.

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS

React - pass props to react components (class component)
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join