Updating the added data using the same form | Reactjs

It should be id and then event ( swap the arguments ). You're expecting a bound function to receive the event as the first argument, whereas it will be the id. Also, you don't need to bind the function to this(BTW which will be undefined) since you defined handleupdate as an arrow function in App.

 handleUpdate = (id, event) => {
   .
   .
   .        
 }

OR

you can just simply do

<Card key={data.id} className={classes.card} 
      onClick={ e => { 
        props.handleUpdate(e, data.id) 
      }} 
      elevation={1}
>

------------ Updated -----------

Here is the Solution -

You can use Id in your state to track which object is being currently edited and Editing to track that the form is in editing state for updation. Editing state is then used to render a save button for edtis rather than a submit.

App.js

import React, { Component } from "react";
import { withStyles, Grid } from "@material-ui/core";
import styles from "./Style";
import Form from "./Form";
import DataList from "./DataList";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Datas: [
                {
                    id: 0,
                    Name: "Tony Stark",
                    Occupation: "Iron Man",
                    Details: "SuperHero, PlayBoy, Philatherophist"
                },
                {
                    id: 1,
                    Name: "Steve Rogers",
                    Occupation: "Captain America",
                    Details: "Captain, Soldier, SuperHero"
                },
                {
                    id: 2,
                    Name: "Thor",
                    Occupation: "God of Thunder",
                    Details: "SuperHero, God, King"
                }
            ],
            Id: "",
            Name: "",
            Occupation: "",
            Details: "",
            IsEditing: false
        };
    }

    handleChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    handleClick = (e, data) => {
        e.preventDefault();
        //data.id = Math.random()
        let Datas = [
            ...this.state.Datas,
            {
                id: Math.random(),
                Name: this.state.Name,
                Occupation: this.state.Occupation,
                Details: this.state.Details
            }
        ];
        this.setState({
            Datas
        });
        this.reset();
    };

    handleDelete = id => {
        const Datas = this.state.Datas.filter(data => {
            return data.id !== id;
        });
        this.setState({
            Datas
        });
    };

    handleUpdate = (e, id) => {
        const index = this.state.Datas.findIndex(data => {
            return data.id === id;
        });

        const data = Object.assign({}, this.state.Datas[index]);
        this.setState({
            Id: data.id,
            Name: data.Name,
            Occupation: data.Occupation,
            Details: data.Details,
            IsEditing: true
        });
    };

    saveUpdate = id => {
        const newData = this.state.Datas.map(d => {
            console.log(id, d.id);
            if (d.id === id) {
                return {
                    Name: this.state.Name,
                    Occupation: this.state.Occupation,
                    Details: this.state.Details
                };
            }
            return d;
        });

        this.setState(
            {
                Datas: newData,
                IsEditing: false
            },
            () => {
                this.reset();
            }
        );
    };

    reset = () => {
        this.setState({
            Id: "",
            Name: "",
            Occupation: "",
            Details: ""
        });
    };
    render() {
        const { classes } = this.props;
        const { Id, Name, Occupation, Details, Datas, IsEditing } = this.state;
        return (
            <div>
                <Grid container>
                    <Grid item xs={6}>
                        <div className={classes.cover}>
                            <Form
                                handleChange={this.handleChange}
                                handleClick={this.handleClick}
                                saveUpdate={this.saveUpdate}
                                Id={Id}
                                Name={Name}
                                Occupation={Occupation}
                                Details={Details}
                                Editing={IsEditing}
                            />
                        </div>
                    </Grid>
                    <Grid item xs={6}>
                        <div className={classes.cover}>
                            <DataList
                                datas={Datas}
                                handleDelete={this.handleDelete}
                                handleUpdate={this.handleUpdate}
                            />
                        </div>
                    </Grid>
                </Grid>
            </div>
        );
    }
}

export default withStyles(styles)(App);

Form.js

import React from "react";
import { withStyles, TextField, Button } from "@material-ui/core";
import styles from "./Style";

const Form = props => {
    const { Id, classes, Name, Occupation, Details, Editing } = props;
    return (
        <div>
            <form>
                <TextField
                    type="text"
                    name="Name"
                    label="Name"
                    className={classes.textField}
                    onChange={props.handleChange}
                    value={Name}
                />
                <TextField
                    type="text"
                    name="Occupation"
                    label="Occupation"
                    className={classes.textField}
                    onChange={props.handleChange}
                    value={Occupation}
                />
                <TextField
                    type="text"
                    name="Details"
                    label="Details"
                    className={classes.textField}
                    onChange={props.handleChange}
                    value={Details}
                />
                {Editing ? (
                    <Button
                        variant="outlined"
                        onClick={e => {
                            e.preventDefault();
                            props.saveUpdate(Id);
                        }}
                        type="button"
                        className={classes.button}
                    >
                        Update
                    </Button>
                ) : (
                    <Button
                        variant="outlined"
                        onClick={props.handleClick}
                        type="submit"
                        className={classes.button}
                    >
                        Submit
                    </Button>
                )}
            </form>
        </div>
    );
};

export default withStyles(styles)(Form);