How to include DropdownList chosen item id value into Api function to extract another table from DB using Axios in React?

Question

I am new to React, so sorry for messing questions.

I have React with Material UI, Express, MySQL app and dropdown menu where I extract data from table "diseases" from my database that is nicely displayed. Now I need to extract data from table "procedures" which depends on what choice has been made by user in dropdown list. There can be several procedures that are good for several diseases and back so I created intermediate entity that consists of id's.

Now if I press button "Search" and watch the problem in inspect it throws:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of DropDiseases. See https://reactjs.org/link/warning-keys for more information. I read the link, but I'm not sure how do I realise it. Appreciate any help!

//  TODO Extract list of diseases from db into dropdown list
function DropDiseases() {
  const [diseases, setDiseases] = useState([]);

  const loadData = async () => {
    const response = await axios.get("http://localhost:4000/diseases/all/et");
    setDiseases(response.data);
  };

  useEffect(() => {
    loadData();
  }, []);
  console.log(diseases);

  //////////////////////////////////////////////////////////////////////////////

  // TODO Extract data from DB depending on selected value in Dropdown
  const [procedures, setProcedures] = useState([]);

  const loadProcedures = async () => {
    const result = await axios.get(
      "http://localhost:4000/procedures/procedures_diseases"
    );
    setProcedures(result.data);
  };

  return (
    <Grid container spacing={5}>
      <Grid item xs={6}>
        {/* ----------------------------------------------------------------------- */}
        {/* Dropdown element */}
        <Autocomplete
          multiple
          id="checkboxes-tags-demo"
          options={diseases}
          disableCloseOnSelect
          getOptionLabel={(option) => `${option.dis_title_et}`}
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {[option.dis_title_et]}
            </li>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField {...params} label="Haigused" placeholder="Favorites" />
          )}
        />
      </Grid>

      {/* --------------------------------------------------------------------------- */}
      {/* Fetching Procedures data from DataBase */}

      <Grid style={classes.extractData} item xs={6}>
        <Button spacing={5} onClick={loadProcedures} variant="contained">
          Search
        </Button>

        {procedures.map((val, key) => {
          return (
            <Grid item xs={6}>
              <Typography variant="h6">
                Procedure{procedures.proc_title_et}
              </Typography>
              <Typography variant="body1">body1 </Typography>
            </Grid>
          );
        })}
      </Grid>
    </Grid>
  );
}
export default DropDiseases;
```

On Sever there is structure conrollers, models and routes files
in Models I make such query
```
  static findAllProceduresOnDiseases() {
    let sql = `Select proc_title_et, proc_descr_et, proc_duration, proc_price FROM procedures 
    INNER JOIN procedures_diseases ON procedures.id=procedures_diseases.procedures_id 
    INNER JOIN diseases ON procedures_diseases.diseases_id=diseases.id;`;
    return db.execute(sql);
  }

Should I include in SQL clause after all Inner Joins WHERE ( to include diseases.id=${diseases.id} and in controller for "disease" id that catches from dropdown list

Answer 1

The issue is caused by this map method here:

{procedures.map((val, key) => {
    return (
        <Grid item xs={6}>
            <Typography variant="h6">
                Procedure{procedures.proc_title_et}
            </Typography>
            <Typography variant="body1">body1 </Typography>
        </Grid>
    );
})}

For each grid item you output, it must have a key property where the value is unique. If you can add a unique id in your SQL query to use, then great!

Keys are required on your looped items so react can tell the difference between each one. For example, if each row was a component, each could have its own state/props etc, so having a unique keys prevents issues.

So once you have your ID (you could use key, but it's generally frowned upon?) it's just:

<Grid item xs={6} key={THE_UNIQUE_ITEM_ID_HERE}>

And that will fix the issue.