反应：错误：意外的令牌

Question

I am getting an error in this code in render() function on the line where I do return where it says unexpected token.Here is the code.

class  Game extends React.Component {
   constructor(props){
      super(props);
      this.size=3;
      this.board=this.initilaizefun(this.size);
      this.state={
         rows:this.size,
         columns:this.size,
         arr:this.board
      }
   }
    shuffle =(array)=>{

    }
   //now we fill values from o to 8 in board
   initilaizefun=(size)=>{

  }

   rendergrid=()=>{

 }

   render() {
     return (
     <div className="game">
      <h1>PUZZLE</h1>
     </div>
     );
   }
}
ReactDOM.render(<Game />, document.getElementById('root'));

Answer 1

You renderGrid function contains multiple syntactic errors. Also while writing React code, you need to configure babel with webpack or standalone cdn

rendergrid function will be like

rendergrid = () => {
    let arr1 = Array(this.state.size);
    console.log(arr1);
    return arr1.map((val, index1) => {
      return <div className="board">
        {
          arr1.map((val, index2) => {
            let val2 = this.state.arr[index1][index2].value;
            return <button className="button" >{val2}</button>;
          })
        }
      </div>
    })
  }

working codesandbox

If you don't wish to use webpack, you can use cdn like

<div id="root"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script src="app.jsx" type="text/babel"></script>