解构道具 object 返回 undefined

Question

I'm trying to create a data-grid in react, and I've been having trouble with accessing the data in my props. Everytime I try to access the data or destructure the prop my console reads "undefined".

I've only been getting this error when the prop is an object of arrays (of objects). When, doing the same thing with just an object of strings, it seems to be working fine - so I feel like I'm missing something fundamental here.

In the following extracts, I've removed some code for brevity. In one file, I have the following:

let inputRows = [
    { id: 0, title: "Task 1", complete: 20 },
    { id: 1, title: "Task 2", complete: 40 },
    { id: 2, title: "Task 3", complete: 60 }];
let inputCols = [
    { key: "id", name: "ID", editable: true },
    { key: "title", name: "Title", editable: true },
    { key: "complete", name: "Complete", editable: true }];
let matrixExample1 = {inputRows, inputCols};

const Tabs=(props) => {
    return (
        <div>
            <MatrixParameter props={matrixExample1}>
        <div>
    );

In the MatrixParameter file, I have the following:

const MatrixParameter = (props) => {
    console.log(props);

    let {
        inputRows,
        inputCols
    } = props;

    console.log(props);
    console.log(props.inputRows);
    console.log(inputRows);

    return (
        <*removed*>
    )

Console.log returns the following: reading the props successfully for the first two logs, but returning undefined for the next two logs. The removed portion of my code returns an error, saying that inputRows is undefined. What's going on?

( edit: As suggested by the answers, I wasn't doing the same thing for the object of strings. The error was the incorrect passing of the object by using <MatrixParameter props="matrixExample1"/> and/or the failure to compensate for that by using (props) instead of ({props} ).

Answer 1

As explained in the comments and other others, <MatrixParameter props={matrixExample1}> causes the argument of the functional component (named props ) to be an object with a .props property.

However, instead of changing the destructuring to work with that, I think what you actually meant to do was using jsx spread attributes

<MatrixParameter {...matrixExample1} />

which is equivalent to

<MatrixParameter inputRows={inputRows} inputCols={inputCols} />

Answer 2

you have passed them as an object with the key value of props . so it should be destructed as below.

let {
        inputRows,
        inputCols
    } = props.props;

You can also use this method of destruction:

   let {
        props:{
        inputRows,
        inputCols
        }
    } = props;

Answer 3

you are passing props as prop of MatrixParameter to fix your code you need to use it like

props.props 
 //or like this 
MatrixParameter = ({props})=>