Passing Objects to Component in React

Question

I'm fairly new to the react side of life and have come across a slightly annoying issue with my Syntax that I could do with a little help on.

The premise is very simple:

I am trying to pass an object as a prop to a Component.

Parent Element: -- Trying to pass the state to the Totals component

class Dash_overview extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            companies: {
                title: 'companies on record',
                value: null,
                messurement: 'Companies'
            },
            earning: {
                title: 'total earning',
                value: null,
                messurement: 'mill'
            }
        }
    }
    render(){
        return (
            <div className="overview-container">
                <div className="totals">
                    <Totals values={this.state.companies}/>
                    <Totals values={this.state.earning}/>
                </div>
            </div>
        )
    }
}

Child Component -- which is going to use the values passed to it

class Totals extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            
        }
    }
    render(){
        return (
            <div className="totals_comp">
                <h3>{companies.title}</h3>
                <h3>{companies.value}</h3>
                <h3>{companies.messurement}</h3>
            </div>
        )
    }
}

--

Im probably making a silly mistake but I have tried a few different variations of this without success so would really value someone pointing out where I am going wrong. :)

Thanks in advance, Wally

Drew Reese · Accepted Answer · 2020-08-31 08:56:34Z

1

You can spread the state values into the child component props, the object keys will be the prop names used within the component.

<Totals {...this.state.companies}/>
<Totals {...this.state.earning}/>

Or explicitly pass the prop values

const { messurement, title, value } = this.state.companies;

...

<Totals
  messurement={messurement}
  title={title}
  value={value}
/>
<Totals
  messurement={messurement}
  title={title}
  value={value}
/>

And then in the child access via props

<div className="totals_comp">
  <h3>{this.props.title}</h3>
  <h3>{this.props.value}</h3>
  <h3>{this.props.messurement}</h3>
</div>

Issue

values={this.state.companies} takes the state object value and assigns it to a prop named values, but then in the child component you don't reference it at all. i.e. like props.values.title.

edited Aug 31, 2020 at 8:56

answered Aug 31, 2020 at 8:42

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Qchmqs Over a year ago

no don't, pass them as a named parameter and grab them as expected instead

Drew Reese Over a year ago

@Qchmqs When spread the object keys are used to provide the prop name, which matches what is being accessed in the component.

Qchmqs Over a year ago

which isn't very predictable with two objects prone to change at any moment, and doesn't even address the real question, which is how to access the props

Drew Reese Over a year ago

@Qchmqs Please read the included reason for issue and entire suggested solution, which covers reading/accessing the passed props.

Besma · Accepted Answer · 2020-08-31 08:58:33Z

1

Since you are passing {title: 'companies on record',value: null,messurement: 'Companies'} as values prop, you should consume values from the other component. if you want to use companies name do this :

<div className="overview-container">
        <div className="totals">
            <Totals companies={this.state.companies}/>
            <Totals companies={this.state.earning}/>
        </div>
    </div>

and then do this on Totals component:

const {companies}=this.props
render(){
  return (
    <div className="totals_comp">
        <h3>{companies.title}</h3>
        <h3>{companies.value}</h3>
        <h3>{companies.messurement}</h3>
    </div>
 )}

answered Aug 31, 2020 at 8:58

Besma

111 bronze badge

Comments

Zar Ni Ko Ko · Accepted Answer · 2020-08-31 08:56:20Z

0

Try this.

const { title,value,messurement }  = this.props.values;
    
    render(){
        return (
            <div className="totals_comp">
                <h3>{title}</h3>
                <h3>{value}</h3>
                <h3>{messurement}</h3>
            </div>
        )
    }

edited Aug 31, 2020 at 8:56

answered Aug 31, 2020 at 8:48

Zar Ni Ko Ko

3522 silver badges7 bronze badges

3 Comments

Wally Over a year ago

this worked as intended - thank you for your help - quick question on this answer / why is react unable to take props passed into its components i.e. is this expected to have to define in the component the props you are passing // In Vue.js you have to define an array of props i.e. props=['title', 'value', measurement] - if you have any documentation on this that would be great - for the moment - thanks again for the help :)

Drew Reese Over a year ago

@Wally React components are passed a single argument, props, which is an object. You don't need to define the properties (propTypes) of this object, but you need to know/understand what properties are being passed in order to access them. You stuffed all the state into a property called values, so you needed to unstuff them from values. Components and props may help.

Zar Ni Ko Ko Over a year ago

In react .props perform as a data communication from parent to child component. When props value change , the component receive that prop rerender agan . Complete guide for your curiosity read documentation here reactjs.org/docs/components-and-props.html

Collectives™ on Stack Overflow

Passing Objects to Component in React

3 Answers 3

Issue

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Issue

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related