CODEWITHSUNDEEP
reactjsobjectreact-props
Kristine
Kristine

Reputation: 747

Accesing object using props in ReactJs

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>
        );
    }
}

Upvotes: 0

Views: 33

Answers (1)

helloitsjoe
helloitsjoe

Reputation: 6529

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}?

Upvotes: 2

Related Questions