Alejandro Alejandro - 1 month ago 13
React JSX Question

React.js -- Not Passing Components Correctly

In my code, I am using Redux and the state I am passing from my container,

this.props.mapGenerated.grid
, is a 2D array.

Having said that, I am nesting a loop in order to output
Tiles
from its component but I do not see it being invoked at all.

container.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';
import Tiles from '../components/Tiles';

class MapGenerator extends Component {
constructor(props){
super(props);
this.renderTiles = this.renderTiles.bind(this);
}
componentDidMount(){

}
renderTiles(cell,row,column){
<Tiles cell={cell} row={row} column={column} />

}
render(){
return (
<svg width="500" height="500">
{this.props.mapGenerated.grid.map( (row,rowIndex) =>{
row.map( (cell, colIndex) =>{
this.renderTiles(cell,rowIndex, colIndex)
})
})}
</svg>
)
}
}


What am I doing wrong?

Answer

You need to use return in the map and the function renderTiles(),

Try this code. Hope this helps!

import React, { Component } from 'react';
import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux';
import Tiles from '../components/Tiles';

class MapGenerator extends Component {
  constructor(props){
    super(props);
    this.renderTiles = this.renderTiles.bind(this);
  }
  componentDidMount(){

  }
  renderTiles(cell,row,column){
    return <Tiles cell={cell} row={row} column={column} />

  }
  render(){
    return (
      <svg width="500" height="500">
        {this.props.mapGenerated.grid.map( (row,rowIndex) =>{
          return row.map( (cell, colIndex) =>{
            return this.renderTiles(cell,rowIndex, colIndex)
          })
        })}
      </svg>
    )
  }
}