How to create array of buttons inside a loop

Question

I am trying to create array of buttons as shown below in the code section. I am using sandbox. I'm getting the error posted below

code:

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

var arrButtons = [];
var buttonStyle = {
    margin: '10px 10px 10px 0'
};

class ButtonClicks extends React.Component {
    constructor(props) {
        super(props);
        this.onClickFunction = this.onClickFunction.bind(this);
    }
    onClickFunction() {
      console.log("hello world from button: " + i);
    };

    render() {
        return (
            for (let i = 0; i < 10; i++) {
                var button = <button
                    style={buttonStyle}
                    onClick={onClickFunction}>
                    p.name
                </button>
                arrButtons.push(button);
            }
        );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);
export default ButtonClicks;

error

/src/index.js: Unexpected token (21:4)

Wait, this post's tag is react-native but the code in question is react-dom. Might want to edit this. — ionizer
– ionizer, Commented Jul 31, 2018 at 13:51
Anyways, check my answer. Your approach is already correct but render only accepts 1 element. So, I've moved the for loop and put the buttons inside a div. — ionizer
– ionizer, Commented Jul 31, 2018 at 14:09

ionizer · Accepted Answer · 2018-07-31 14:15:48Z

1

Your approach is correct. BUT! React's render only accepts 1 element (which child can have as many elements as you need it). So you need to wrap those buttons inside a div. That's about the only change I made aside of moving your for loop outside return.

var arrButtons = [];
var buttonStyle = {
    margin: '10px 10px 10px 0'
};

class ButtonClicks extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  
  onClick() {
    console.log("hello world");
  }

  render() {
    for (let i = 0; i < 10; i++) { //Moved your loop outside render()'s return
      arrButtons.push(<button style={buttonStyle} onClick={this.onClick}>{i}</button>)
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

ReactDOM.render( <ButtonClicks/> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited Jul 31, 2018 at 14:15

answered Jul 31, 2018 at 13:58

ionizer

1,73112 silver badges23 bronze badges

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

2 Comments

Amrmsmb Over a year ago

thanks i would like to pass the index i to onClickFunction so that when button 3 is clicked, i should get: hello world from button 3....would you please help m doing it

ionizer Over a year ago

onClick={() => this.onClick(i)}

Collectives™ on Stack Overflow

How to create array of buttons inside a loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related