2

I'm trying to map each array item to it's own div (to create a TicTacToe board). However, when I pass it in from props, it is recognized as an object. Here is an example:

Here is my App.js file:

class App extends Component {
  state = {
    gameBoard: Array(9),
  }

  render() {

    console.log(this.state.gameBoard)
    console.log(Array.isArray(this.state.gameBoard))

    return (
      <div className="App">
        <Board squares={this.state.gameBoard}/>
      </div>
    );
  }
}

export default App;

Here is my Board.js Component file:

function Board(squares) {

    console.log(squares)
    console.log(Array.isArray(squares))

    return (
        null
    )

}

export default Board

The console logs in App.js work as expected yielding:

//(an array)

" (9) [empty × 9] "
"true"

However, the console logs in Board.js yield:

//(an object)

"{squares: Array(9)}"
"false"

I'm curious as to why this happens. Also, if there is a way, how can I get my component to recognize props as an array?

3 Answers 3

4

The squares parameter in the child Board component is a prop object. If you try squares.squares should return an Array

function Board(squares) {
    // This is the prop object that react passes to a child component.
    console.log(squares);
    console.log(squares.squares)
    console.log(Array.isArray(squares.squares))

    return (
        null
    )

}

export default Board
2
  • 1
    I see! 'props' is an object containing anything passed to the component and squares is passed to the component. So really I should change the argument in the Board.js component from 'squares' to 'props' to make it more clear. Then I can log props.squares to access the array. This makes much more sense. Thank you for your help! Commented Apr 13, 2019 at 23:39
  • You can also use object destructuring on the props object, see my answer below. Commented Feb 2 at 23:08
2

What Board component receives is the props object, and in your case, one of its properties will be squares. So your Board code should be:

function Board(props) {

    console.log(props.squares)
    console.log(Array.isArray(props.squares))

    return (
        null
    )

}

export default Board
0

I wanted to offer an alternative solution, which is to use object destructuring to break the props up into their individual names. Wrap the squares prop in the function declaration in curly braces:

function Board({squares}) {

    console.log(squares)
    console.log(Array.isArray(squares))

    return (
        null
    )

}

export default Board

If you were to add another prop to the component, it would look like this:

function Board({squares, sayHello}) {

    console.log(squares)
    console.log(Array.isArray(squares))

    return (
        {sayHello ? 'Hello!' : null}
    )

}

export default Board

...and your component tag would look like this:

<Board squares={this.state.gameBoard} sayHello={true} />

This is kind of a tricky thing to wrap one's head around, but in your original code squares is just an alias for props, which is why you have to use squares.squares to access your named property. It's the same as if you wrote this:

function Board(props) {

    console.log(props.squares)
    console.log(Array.isArray(props.squares))

    return (
        null
    )

}

export default Board

Ultimately how you do it is just a matter of taste, but it's easy to get tripped up when you're going from classic Javascript function arguments to React component prop objects. Use whichever method is most readable to you/your team.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.