Material Ui list function returning duplicate values

Question

I am trying to return the added todo item to the list i have created. I have used the material ui library to create the list . I am able to return the newly added todo item to the list but it produces the whole array once again, not just the specific value that was added.

I have added the code i have used in app.js , listlayout.js is the page that renders the new to do item that was added. There is another component for the form , i have not added that code since it is not important for this particular problem

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      newItem: {
        id: "",
        itemText: ""
      }
    };
    this.handleInput = this.handleInput.bind(this);
    this.addItem = this.addItem.bind(this);
  }

  handleInput = e => {
    this.setState({
      newItem: {
        id: 1 + Math.random(),
        itemText: e.target.value
      }
    });
  };

  addItem = e => {
    e.preventDefault();
    const typedItem = this.state.newItem;

    if (typedItem.text !== "") {
      const typedItems = [...this.state.items, typedItem];
      this.setState({
        items: typedItems,
        newItem: {
          id: "",
          items: ""
        }
      });
    }
  };

  render() {
    return (
      <div>
        <HeaderBar />
        <InputForm
          newItem={this.state.newItem.itemText}
          addItem={this.addItem}
          handleInput={this.handleInput}
        />
        <ListLayout items={this.state.items} />
      </div>
    );
  }
}

export default App;

ListLayout.js

const ToDoList = props => {
  const classes = useStyles();
  const [dense] = React.useState(false);
  const items = props.items;

  function generate(element) {
    return items.map(value =>
      React.cloneElement(element, {
        key: value
      })
    );
  }

  const listItems = items.map(item => {
    return <div key="item.id">{item.itemText}</div>;
  });

  return (
    <div>
      <Grid container spacing={0} justify="center" style={{ marginTop: -150 }}>
        <Grid item xs={12} md={6}>
          <Typography variant="h6" className={classes.title}>
            To do List
          </Typography>
          <div className={classes.demo}>
            <List dense={dense}>
              <Card variant="outlined">
                {generate(
                  <ListItem>
                    <ListItemText primary={listItems} />
                    <ListItemSecondaryAction>
                      <IconButton
                        edge="end"
                        aria-label="edit"
                        style={{ color: green[800] }}
                      >
                        <EditIcon />
                      </IconButton>
                      <IconButton
                        edge="end"
                        aria-label="delete"
                        style={{ color: red[800] }}
                      >
                        <DeleteIcon />
                      </IconButton>
                    </ListItemSecondaryAction>
                  </ListItem>
                )}
              </Card>
            </List>
          </div>
          <Button
            variant="text"
            color="inherit"
            style={{ background: "#d50000", width: "100%", color: "white" }}
            size="Large"
            startIcon={<ClearAllIcon />}
          >
            Clear All
          </Button>
        </Grid>
      </Grid>

      <br />
    </div>
  );
};

export default ToDoList;

Answer 1

There are multiple notice points in your code:

• Material-UI ListItemText props API: primary should only receive one element for each item.
• You don't really need to use Top level API React.cloneElement(), the normal map() would work fine.
• Change key="item.id" to key={item.id}
• Change Button props size="Large" to size="large"

---

Fixed all and it seems normal, try it online: