Alejandro Alejandro - 2 months ago 15
React JSX Question

React/Redux - Passing props from one container to another

I'm fairly new to Redux so if my implementation is wrong, please advice.

In my current app, I have two containers. Essentially the information that I want is: from one of the container, I'd like to pass a prop to the other container.

Specifically, I want myArray variable from Board to pass it down to the Controller container.

Here's what I've done so far:

containers/board

class Board extends Component {
constructor(props){
super(props);
this.onClickToggle = this.onClickToggle.bind(this)
}
onClickToggle(coord){
this.props.onCellClick(coord)
}
componentDidMount() {

}
render(){
const height = this.props.grid.height
const width = this.props.grid.width
let rows = [];
let myArray = []
for (let y = 0; y < height; y++) {
let rowID = `row${y}`;
let bin = [];
let obj = {}
for (let x = 0; x < width; x++){
let cellID = `${y}-${x}`;
let index = y * width + x //index of grid;
let status = this.props.grid.cells[index];//0 = dead, 1 = alive
bin.push(
<Cell
key={x}
id={cellID}
status={status}
onClick={() => this.onClickToggle({x,y})}
/>)
obj[cellID] = status
}
rows.push(<tr key={y} id={rowID}>{bin}</tr>)
myArray.push(obj);
<Controller coord={myArray} />
}
return(
<div className="container">
<div className="row">
<div className="col s12 board"></div>
<table id="simple-board">
<tbody>
{rows}
</tbody>
</table>
</div>
</div>
)
}
}

function mapDispatchToProps(dispatch){
return bindActionCreators({onCellClick}, dispatch)
}
function mapStateToProps(state) {
return {
grid: state.grid
};
}

export default connect(mapStateToProps,mapDispatchToProps)(Board)


containers/controller

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

test(){
// this.props.start
console.log(this.props)
}
render(){
return(
<div className="container">
<div className="row">
<div className="col s12 controller">
<a onClick={this.test} className="waves-effect waves-light btn">Start</a>
<a onClick={this.props.clear} className="waves-effect waves-light btn">Clear</a>
<a onClick={this.props.randomize}className="waves-effect waves-light btn">Randomize</a>
</div>
</div>
</div>
)
}
}

function mapDispatchToProps(dispatch){
return bindActionCreators({clear,randomize,start}, dispatch)
}


export default connect(null,mapDispatchToProps)(Controller)


I understand how to pass props to components, but I haven't faced a situation of passing props from one container to another one.

Answer

Remove <Controller coord={myArray} /> from the for loop. You can nest the controller inside return statement like below, to access its values.

containers/board

return(

  <div className="container">

   <Controller coord={myArray} />

    <div className="row">
      <div className="col s12 board"></div>
        <table id="simple-board">
           <tbody>

           </tbody>
         </table>
      </div>
  </div>
)

containers/controller

test(){
  // this.props.start
  console.log(this.props.coord)
}
Comments