Accesing object using props in ReactJs

Question

I'm trying to access object keys using props as an index but it's not working. Error: Objects are not valid as a React child (found: object with keys {id, name, img_url, location}). If you meant to render a collection of children, use an array instead. I am new to React so I appreciate any help.

My code:

class ExpandCard extends React.Component {

    render() {
        const props = this.props;
        const profiles = props.profiles;

        return(
            <>
                <div className="">
                    {profiles[props.active]}
                </div>
            </>
        );
    }
}

class App extends React.Component {
    state = {
        profiles: testData,
        active: null,
    }

    getActive = (dataFromCard) => {
        console.log('the magic number is', dataFromCard);
        this.setState({active: dataFromCard});
    }

    render() {

        return (
            <div>
                <div className="wrapper">
                    <header>
                        <div className="logo">LOGO</div>
                    </header>
                    <Form />
                    <div className="cards">
                        <div className="card-list">
                            {this.state.profiles.map(profile => <Card key={profile.id} {...profile} activeCard={this.getActive} />)}

                        </div>
                        <div className="expand-card">
                            <ExpandCard active={this.state.active} profiles={this.state.profiles} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

helloitsjoe · Accepted Answer · 2019-07-26 03:27:27Z

2

It looks like {profiles[props.active]} returns an object that looks like this:

{ id, name, img_url, location }

You can't return an object from a React component, maybe you meant to return {profiles[props.active].name}?

answered Jul 26, 2019 at 3:27

helloitsjoe

6,5393 gold badges24 silver badges34 bronze badges

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

1 Comment

Kristine Over a year ago

Thanks! I needed to check first if props.active is not Null! Everything works. Thank you. The user is <b>{props.active ? profiles[props.active].name : 'not'}</b> logged in.

Collectives™ on Stack Overflow

Accesing object using props in ReactJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related