React – How to pass values to a Component

By | 15/04/2020

In this post, we will see how to pass values to a Component in React.
This is possible using the Props, that is kind of global variable or object, using them like HTML attributes.

First of all, we create a file called User.js:

[USER.JS]

import React from 'react'

const User = () => {
    return(
        <h1>Welcome User</h1>
    )
}

export default User;



Then, we import and use this component in the file App.js:

[APP.JS]

import React from 'react';
import './App.css';
import User from './components/user'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <User></User>
        <br></br>
        <User></User>
      </header>
    </div>
  );
}

export default App;



If we run the application, using the command npm start, this will be the result:

Now, we will use Props in order to display an Username.
We start to change User.js:

[USER.JS]

import React from 'react'

const User = (props) => {
    return(
    <h1>Welcome User {props.Username}</h1>
    )
}

export default User;



Then, we modify App.js in order to pass the value in the component:

[APP.JS]

import React from 'react';
import './App.css';
import User from './components/user'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <User Username="Damiano"></User>
        <br></br>
        <User Username="Dorian"></User>
      </header>
    </div>
  );
}

export default App;



Now, if we run the application, this will be the result:

It is important to understand that Props is read-only and so, we cannot change the value.
We try to change the value of Props in User.js:

[USER.JS]

import React from 'react'

const User = (props) => {
    props.Username = 'john';
    return(
    <h1>Welcome User {props.Username}</h1>
    )
}

export default User;



If we run the application, we will have an error like that:

Obviously, we can take the value of Props an create another variable:

[USER.JS]

import React from 'react'

const User = (props) => {
    var newUser = props.Username +  ' John';
    return(
    <h1>Welcome User {newUser}</h1>
    )
}

export default User;



If we run the application, this will be the result:

Another case where we need to use Props, is when we want to render what there is between the opening and closing tags of a component.

We create a component called TestChildren:

[TESTCHILDREN.JS]

import React from 'react'

const TestChildren = () =>{
    return(
        <div>
            <h1>Hello World</h1>
            <h2>Hello World</h2>
        </div>
    )
}

export default TestChildren;



Finally, we add the component in the App.js:

[APP.JS]

import React from 'react';
import './App.css';
import TestChildren from './components/TestChildren'


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TestChildren>
          <b>Can you see it?</b>
        </TestChildren>
      </header>
    </div>
  );
}

export default App;



If we run the application, this will be the result:

There is a problem: we cannot see the text “Can you see it”.

In order to fix this problem, we have to modify the component TestChildren.js, using Props:

[TESTCHILDREN.JS]

import React from 'react'

const TestChildren = (props) =>{
    return(
        <div>
            <h1>Hello World</h1>
            <h2>Hello World</h2>
            {props.children}
        </div>
    )
}

export default TestChildren;



Now, if we run the application, this will be the result:



Leave a Reply

Your email address will not be published.