Looping through data by using map

General
1

I am looking into creating my own renderer for tables and treeview (material-ui/lab).
There is right now one problem: I cannot build my own structure by looping through the data. Instead of looping, it says “data.baseProperties is undefined”. But when debugging, the whole information of data.baseProperties is in fact available. Probably using the wrong export? Thanks!

[original thread by Seprech]

2

[Seprech]

const MyArrayTester = ({ 
  data,
  cells,
  handleChange,
  rootSchema,
  uischema,
  schema,
  path
}: InputControlProps) => (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="right">Type</TableCell>
            <TableCell align="right">Description</TableCell>
            <TableCell align="right">Example</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {cells.map((row, index) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.baseProperties}
              </TableCell>
              <TableCell
              align="right"
              onClick={(ev: any) => {//debugging
                var all = "";
                for(var prop in data) {
                  all+=prop + '\n';
                  }
                  alert(all);
                  alert(data.baseProperties);
               }}
              >
              {row.name}</TableCell>
              <TableCell align="right">{row.type}</TableCell>
              <TableCell align="right">{row.description}</TableCell>
              <TableCell align="right">{row.example}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );

export const myArrayTester = rankWith(1000, scopeEndsWith('baseProperties'));
export default withJsonFormsLayoutProps(MyArrayTester);
3

Hi @seprech(seprech), looks like you are using the wrong HOC. withJsonFormsLayoutProps doesn’t provide data as there is no data to show for a layout renderer. You probably want to use withJsonFormsControlProps or withJsonFormsArrayControlProps.

4

[Seprech]

Hi Stefan, thanks for the fast reply! cells.map is wrong, I’ve used that to get no error and have in fact access to the data when doing the onclick function. data has the property baseProperties which is a array so normaly it should work with data.baseProperties.map(… but somehow I get the a typerror “data is undefined”. I’ve tried your recommendations but still ending in getting an error before even the loop gets started.

5

[Seprech]

Found the solution: it is all about preventing an possible error therefore the map function needs to be called like data&& data.map(…

6

Great that you found a solution!