React - how to change properties of a component in another component

Question

function DatTable() {
  return (
      <DataTable
          theme="dark"
          columns={columns}
          selectableRows
          data={FakeData}
      />
  );
};

I've called this component from another file in a dashboard

</Box>
  <DatTable></DatTable>
</Box>

Everything works properly if I change the properties in the original function. What I'm trying to achieve is set a useTheme hook for the component and for that I want to edit the theme inside of the dashboard like so:

</Box>
  <DatTable 
    theme="dark"
  ></DatTable>
</Box>

I've tried changing the properties inside of the dashboard component but it has no effects. I'm also unsure how to turn regular components into React components since the webpage goes white and breaks if I try it that way.

Answer 1

// default data
let columns={};
let data={}

function DatTable(theme="dark", columns=columns, selectableRows='somedefaultdata',data=FakeData) {
  return (
      <DataTable
          theme=theme
          columns={columns}
          selectableRows
          data={FakeData}
      />
  );
};

Now

<DatTable 
    theme="white"
/>

If you this now:

1. you don't need to send props at all.
2. If you send props those props will overwrite those default values

Answer 2

Since you pass a theme prop to <DatTable> you need to extract it and then use it as a prop again in <DataTable>

function DatTable({theme}) {
  return (
      <DataTable
          theme={theme} 
          columns={columns}
          selectableRows
          data={FakeData}
      />
  );
};