React render multiple button with props [duplicate]

Question

hiii everybody,

i'm new in react and i have lost my day at Trying to run my code

i have a dictionnary in a JS : {key, value}.

i want create some button with the name equal the key. i think i I think I need to pass my dictionary ( or an array of key, because i dont need the value associed) to my reactDom.render .

i have create this :

class ButtonList extends React.Component {
    onClick(event) {
        clictodraw("name");
    }

    render() {
        let items = this.props.items || []
        let rows = items.map(
            item => {return (
                <button onClick={this.onClick}>{item}</button>);}
        );

        return (
            {rows}
        );
    }
}



window.shareRenderFunc5 = function (tab) {
    ReactDOM.render(
            <ButtonList items={tab}/>,
        document.getElementById('app')
    );
}

but he give me this message :

Error: ButtonList.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

i think my problem is on the Data input to props. if you know what is the problem, please tell me.

thanks for your help

write it like this: return ( <div> {rows} <.div> ); wrap the rows with div because rows will be an array and we can't return more than one children. — Mayank Shukla
– Mayank Shukla, Commented Jun 16, 2017 at 17:36
Another possible issue is that when you map array elements to components, you need to give each one a unique key prop (e.g. their index in the array) — m_callens
– m_callens, Commented Jun 16, 2017 at 18:18
yes i have see the warning in my browser for the key, i will change that. thank you for your help. thanx you very much — Cyril Jeanneret
– Cyril Jeanneret, Commented Jun 16, 2017 at 20:07

sbking · Accepted Answer · 2017-11-21 19:33:57Z

1

You need to change your render() function so that it returns a single, top level element, with sub elements inside. Basically, every React component needs to have a single top level node that represents the component:

return (
  <div>
    {rows}
  </div>
)

Edit: With React 16 this answer is no longer correct. You can now return an array of JSX nodes from a component's render function.

edited Nov 21, 2017 at 19:33

answered Jun 16, 2017 at 17:36

sbking

7,71027 silver badges34 bronze badges

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

3 Comments

Bamieh Over a year ago

or just return rows ?

Mayank Shukla Over a year ago

@AhmadBamieh nope, rows will be an array we need to wrap that by a div (single element).

Cyril Jeanneret Over a year ago

Thank you very much, I did not know that. thx you ^^

Collectives™ on Stack Overflow

React render multiple button with props [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related