javascript - Syntax Error - Map multidimensional array in React-Redux -

i've been scratching head hours trying figure out why syntax error when trying iterate multidimensional array :

const inputpanel = react.createclass({   render() {     const { board } = this.props;      return(             <br />       {board.map(rows => {         rows.map(cell => <div classname="digit">1</div>);        })     }   );   } }); 

codepen:

http://codepen.io/anon/pen/vxgmrr

i tried add\modify parenthesis types , nothing helps.

here view i'm trying produce:

</br> <div classname="digit">1</div> <div classname="digit">1</div> <div classname="digit">1</div> </br> <div classname="digit">1</div> <div classname="digit">1</div> <div classname="digit">1</div> </br> <div classname="digit">1</div> <div classname="digit">1</div> <div classname="digit">1</div> 

there couple of problems code.

1. your rows.map(...) statement isn't outputting anything. need return result of rows.map have rendered.

you this:

{board.map(rows => {         return rows.map(cell => <div classname="digit">1</div>);      }) } 

or this:

{board.map(rows => rows.map(cell => <div classname="digit">1</div>))} 

2. it's not clear me if this in render method reference component. use es2015 classes or stateless functions create components, because logic seems clearer me.

so, component rewritten:

class inputpanel extends react.component {     render() {         const { board } = this.props;          return(             <br />             {board.map(rows =>                     rows.map(cell => <div classname="digit">1</div>)                 )             }         );      } } 

or, more simply:

const inputpanel = ({ board }) =>  (     <br />     {board.map(rows => rows.map(cell => <div classname="digit">1</div>))} ); 

now, wrong this - said, i'm not familiar react.createclass way of doing things.

3. react not going bare <br /> in component. render methods need return single element, you're going need wrap in render method in <div> or other element.

and this final 1 source of syntax error: without wrapping element, javascript (or more accurately whatever system you're using interpret jsx code) sees this:

return (     { /* javascript code here */ } ); 

which not valid javascript - can't return code block that.

with enclosing <div>, code looks this:

return (     <div>         { /* javascript code here */ }     </div> ); 

which is valid jsx code , jsx preprocessor can parse it.

so, wrap up, simplest form of component this:

const inputpanel = ({ board }) =>  (     <div>         {board.map(rows => rows.map(cell => <div classname="digit">1</div>))}     </div> ); 

as aside, i'd recommend looking eslint lint code & catch errors this. try use religiously , think has improved code quality :-)