props не отправляет данные другому компоненту

Question

Итак, что я делаю, я отправляю 2 массива другому компоненту в качестве реквизита, и когда я получаю эти реквизиты от другого компонента, он отображается как undefined

Senddata.ts (Компонент, который отправляет данные другому компоненту)

import React from "react";
import DynamicTable from "./DynamicTable";
export interface mydata {
  columns?: [{ text: string; dataField: string }];
  data?: [];
}

const Datasender = () => {
  let columns = [
    { text: "Id", dataField: "id" },
    { text: "Name", dataField: "name" }
  ];

  let data = [
    { id: 1, name: "Manikanta", age: 20, Gender: "male", expandabale: true },
    { id: 2, name: "Varsha", age: 85, Gender: "female", expandabale: true },
    { id: 3, name: "Sai", age: 18, Gender: "male", expandabale: true },
    { id: 4, name: "John", age: 24, Gender: "female", expandabale: false }
  ];

  return (
    <div>
      {data.map((data) => 
        <DynamicTable data={data} col={columns} />
      )}
    </div>
  );
};
export default Datasender;

DynamicTable.ts (Компонент, который получает данные из компонента senddata)

import React from 'react'
 const DynamicTable =(props: any) =>
 {
     return(
         <div className="table-responsive">
             <table className="table">
              <thead>
                  <th scope="col"> #</th>
                  {props.col.map((col: { text: React.ReactNode }) =>{
                      return <th scope="col">{col.text}</th>
                  })}
              </thead>
              <tbody>
                  <tr>
                      
                      <td></td>
                  </tr>
              </tbody>
             </table>


         </div>
     )
 }
 export default DynamicTable

Когда я записываю в консоль реквизиты, они отображаются как undefined, и есть ошибка с map как undefined. Необходимо внести какие-либо изменения в код?

Answer 1

Ciao, попробуйте этот подход:

1. Определите интерфейс для ColumnProps и Data:

   interface Columns
   {
      text: string, 
      dataField: string,
   }
   
   interface ColumnProps {
      columns: Columns[];
   }
   
   interface Data
   {
       id: number, 
       name: string,
       age: number,
       Gender: string,
       expandabale: boolean
   }
   

2. Затем определите тип для DynamicTable реквизит:

   type DynamicTableProps = {
      data: Data,
      columns: ColumnProps 
   }
   

3. Наконец, ваш DynamicTable:

   const DynamicTable = ({ data, columns}: DynamicTableProps) => {...}