Live search using React-Redux

Question

Hello, I’m trying to create a live search with Redux, but it only gives the match with the full word. What is the best method to actually return to my table, in this case only the values that the string in search contains?

Table

  const brandsList = useSelector(state => state.brands.brandList);
            <TableBody>
                {brandsList.slice(0, rowsPerPage).map((brand, i) => (
                  <TableRow className={classes.tableRow} hover key={i}>
                    <TableCell>
                      <Typography variant="body1">{brand.name}</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body1">{brand.CNPJ}</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body1">{brand.email}</Typography>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body1">{brand.address}</Typography>
                    </TableCell>
                    <TableCell>
                      <Link to={`/brand/${brand.id}`}>
                        <IconButton aria-label="edit">
                          <EditIcon />
                        </IconButton>
                      </Link>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>```

Reducer

case fromTypes.SEARCHING_BRANDS:
      const {value} = action;
      const works = state.brandList.filter(item => item.name === value);
      return {
        ...state, value, works
      }

Answer 1

The code provided is incomplete, but you can see what is happening.

const works = state.brandList.filter(item => item.name === value);

This line filters the brandList array with items whose name is identical to value. If you want to filter items whose name includes value, then:

const works = state.brandList.filter(item => item.name.includes(value));

You will probably also want to ignore whether the letters are uppercase and/or lowercase. For this, use toLowerCase() in name and value.