3 Replies - 135 Views - Last Post: Yesterday, 10:20 PM

#1 tekblade   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 21-December 17

Reactjs unexpected token

Posted 30 June 2019 - 04:14 AM

Hi, I have an error in my code because I am seeing Parsing error: Unexpected token.
My code:

class Board extends React.Component {
    constructor(props){
    	super(props);
		let array=[];
	}
	createBoard(){
		for(let j=0;j<20;j++){
			let children=[];
			for(let i=0;i<20;i++){
				children.push(<Pool/>);
			}
		array.push(<div className="row">{children}<div/>);
		}
	console.log(array);
	return array;
	}
	render() {
		return (  // issue goes here 
			<div>	
			aaa
			</div>
		);
	}
}



Regards

Is This A Good Question/Topic? 0
  • +

Replies To: Reactjs unexpected token

#2 tekblade   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 21-December 17

Re: Reactjs unexpected token

Posted 30 June 2019 - 05:54 AM

It can be closed.
Was This Post Helpful? 0
  • +
  • -

#3 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7442
  • View blog
  • Posts: 15,438
  • Joined: 16-October 07

Re: Reactjs unexpected token

Posted 30 June 2019 - 08:43 AM

For those playing along at home, consistent indents and decent editor will spot this one: <div/>.

As an aside, you do not want data floating around in react components that doesn't belong to either props or state. Preferably props. If you find yourself building arrays of children, you're probably going down the wrong path.

In simplest form, I'd do the above as:
class Pool extends React.Component {
  constructor(props) { super(props); }
  render() { return <span style={{border: "1px solid blue"}}>P{this.props.data}</span>; }
}

class BoardRow extends React.Component {
  constructor(props) { super(props); }
  render() {
    return <div className="row">
      <span>{this.props.rowNum}</span>
      {this.props.data.map((x,i) => <Pool key={i} data={x} />)}
    </div>;
  }
}

class Board extends React.Component {
  constructor(props) { super(props); }
  render() {
    return (<div>{this.props.data.map((x,i) => <BoardRow key={i} data={x} rowNum={i} />)}</div>);
  }
}

let data = [];
for (let j = 0; j < 20; j++) {
  let row = [];
  for (let i = 0; i < 20; i++) { row.push(i); }
  data.push(row);
}

ReactDOM.render(<Board data={data} />, document.getElementById('root'));



In more modern tool chains, enjoy stateless components like so:
const Board = (props) =>
  <div>{props.data.map((x,i) => <BoardRow key={i} data={x} rowNum={i} />)}</div>;


This post has been edited by baavgai: 30 June 2019 - 09:45 AM

Was This Post Helpful? 0
  • +
  • -

#4 sagar.chavada   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 10-April 19

Re: Reactjs unexpected token

Posted Yesterday, 10:20 PM

View Posttekblade, on 30 June 2019 - 04:14 AM, said:

Hi, I have an error in my code because I am seeing Parsing error: Unexpected token.
My code:

class Board extends React.Component {
    constructor(props){
    	super(props);
		let array=[];
	}
	createBoard(){
		for(let j=0;j<20;j++){
			let children=[];
			for(let i=0;i<20;i++){
				children.push(<Pool/>);
			}
		array.push(<div className="row">{children}<div/>);
		}
	console.log(array);
	return array;
	}
	render() {
		return (  // issue goes here 
			<div>	
			aaa
			</div>
		);
	}
}



Regards


you have to share your all file. why did you do return if you render in class component. and also give error in Div property.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1