how to edit and delete in api data table in reactjs

Question

I am new to React. Currently, I am doing API fetch and displaying it in a table and adding edit delete in that table. I am successfully fetching API and I can add a new row along with API data, but I don't know how to edit and delete it. I have seen some questions but my code structure is different so I am unable to find the answer. Does any help please?

here is my code,

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { makeStyles,withStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import EditIcon from '@material-ui/icons/Edit';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';




const useStyles = theme => ({
  fab: {
    margin: theme.spacing(1),
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
  },
});
const Post = ({ body }) => {


    return (
        <table className=" table-striped">
          <thead>
           <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Content</th>
          
          </tr>
          </thead>
          <tbody>
  
    
      {body.map(post => {
        const { _id, title, content } = post;
        return (
          
            <tr key={_id}>
            <td> {_id!=''?_id: '-'}</td>
            
            <td> {title!='' ?title: '-'}</td>
            
            <td> {content!=''?content: '-'}</td>
            <hr />
            </tr>
          
        );
      })}
      
    </tbody>
    </table>
  );
};

class App extends React.Component {
  state = {
    isLoading: true,
    posts: [],
    error: null,
    open:false,
   newData:[
     {
      _id:'',
      title:'',
      content:''
     }
  ]
  };
  fetchPosts() {
    const axios = require('axios');
    axios
      .get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json")
      .then(response => {        
          this.setState({
            posts: response.data.posts,
            isLoading: false,
           
          })
  
          //)
      } )
  
        }
  


  componentDidMount() {
    this.fetchPosts();
  }
  handleClickOpen = () =>
    this.setState({
      open:true
    })
;
  handleClose = () =>
    this.setState({
      open:false
    })
;
// handleClick = () =>
//    {
//      {this.handleClickOpen}
//      {this.addItem}
//    }
// ;
 addItem = () =>
 {
    var temp = [];
    var tempPosts = this.state.posts;  
    var newData = this.state.newData[0];
    console.log(this.state.newData)
    if(this.state.newData[0]._id && this.state.newData[0].title && this.state.newData[0].content){
      tempPosts.push(newData);
      console.log(tempPosts)
      this.setState({posts: tempPosts})

    }

  }   

  render() {
    const { isLoading, posts } = this.state;

    
    return (
      <React.Fragment>
        <h1>React Fetch - Blog</h1>
        <div>
      <Button variant="outlined" color="primary" onClick=
    {this.handleClickOpen}
    
>
        Add
      </Button>
      <Dialog open={this.state.open} onClose={this.handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          
          <TextField
            autoFocus
            margin="dense"
            id="_id"
            label="id"
            value={this.state.newData._id}
            onChange={(e)=>  {
              let{ newData } = this.state;              
              newData[0]._id=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
           <TextField
            autoFocus
            margin="dense"
            id="title"
            label="title"
            value={this.state.newData.title}
            onChange={(e)=>  {
              let{newData} =this.state;
              newData[0].title=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
           <TextField
            autoFocus
            margin="dense"
            id="content"
            label="content"
            value={this.state.newData.content}
            onChange={(e)=>  {
              let{newData} =this.state;
              newData[0].content=e.target.value;
              this.setState({newData})
            }}
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button 
            onClick={() => {
                      this.addItem()
                      this.handleClose()
                    }} 
            color="primary">
            Add
          </Button>
          <Button onClick={this.handleClose} color="primary">
            cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
        <hr />
        {!isLoading ? <Post body={posts} /> : <h3>Loading...</h3>}
      </React.Fragment>
    );
  }
}


export default withStyles(useStyles)(App);