Question 256269 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Props are not passed down to component

I don’t understand why my prop values are not being applied to my component. Specifically the row, column and pix value

Board Component:

import '../App.css'

export default function Board({ row, column, pix, children }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${{ column }}, ${{ pix }}px)`,
      gridTemplateRows: `repeat(${{ row }}, ${{ pix }}px)`,
    }}>
      {children}
    </div>
  )
}

Game Component:

import Cell from './Components/Cell'
import Board from './Components/Board'
import { useState } from 'react'
import './App.css'

export default function Game({ row, column, pix }) {
const boardDimensions = {
width: 50,
height: 50
}

const array2D = Array(boardDimensions.height).fill().map((row) => Array(boardDimensions.width).fill(0))
const [fiboCells, setFiboCells] = useState(array2D)

return (
<div className="center">
<Board row={row} column={column} pix={pix}>
{
fiboCells.map((row, i) => row.map((col, j) => (
<Cell
value={col}
rowIndex={i}
colIndex={j}
colour="red"
/>
)))
}
</Board>
</div>
)
}

App Component:

import './App.css';
import Game from './Game'

function App() {
  return (
    <Game row={50} column={50} pix={25}/>
  );
}

export default App;

I expected a grid of 50 x 50 bit instead its all in one vertical line

Tags:

2

Answers


  1. 0

    Try to convert them into states instead of pros.
    Changes in props, do not impact the component, since props are read-only.

    or
    you can create some state variables and pass them as input to "Board" component.

    let me know, if this helps you or not.

    Login or Signup to reply.
  2. 0

    This syntax is wrong:

    `repeat(${{ column }}, ${{ pix }}px)`

    It’s effectively passing objects into the template literal, not values. Observe the resulting string:

    const column = 10;
const pix = 20;
console.log(`repeat(${{ column }}, ${{ pix }}px)`);

    Which of course is not valid CSS.

    Don’t wrap the values in curly braces, just pass them directly to the template literal:

    `repeat(${column}, ${pix}px)`

    As an aside… This is why debugging and observing is important. You have assumed that "props are not passed to the component". This observation is easily proven false by simply logging the prop values to the console within the component, allowing you to observe that they are being passed to the component. Which means the problem was something else.

    Don’t assume. Debug and observe. That’s how you identify and correct problems.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search