How to get specific value from react Component

Question

I am trying to get the ID of the specific input that is selected. I have a handleInputChange function that sets state that i want to send to the DB, what i need is to get the specific ID that is Selected.

  handleInputChange = (event) => {
    console.log(event.target.name)
    console.log(event.target.value)
    console.log(this.props.posts)
    this.setState({
     [event.target.name]: event.target.value,
     postId: **What do I put here to get the value id**
    })
 }

In my render i would like to get the value of post.id whenever they type in the input field

render () {
const reversedProps = this.props.posts.reverse();

const {title, postBody} = this.state
const displayGifPicker = this.state.displayGifPicker
return (
  <Grid item xl={8}>
    {this.props.posts.map((post, index) =>
      <PostBodyTemplate key={index} postId={post.id} onChange= 
 {this.handleInputChange.bind(this)} />
       )} 
 </Grid>
)
}

}




const mt4 = {
  marginTop: '40px',
  height: '350px',
  marginBottom: '40px'
};

const useStyles = makeStyles({
  card: {
    minWidth: 275,
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  }
});

class NewPostBody extends Component {

  constructor(props){
    super(props)
    this.state = {
      commentBody: null,
      postId: null,
      giphyUrl: null,
      postPicture: null,
      userId: null,
      userIdto: null,
      userIdName: null,
      userIdtoName:null,
      // postBody: null,
      // giphyUrl: null,
      // userIdto: null,
      // userIdName: null,
      // userIdtoName:'Julio',

      displayGifPicker: false
    }
  }

  componentWillMount(){
    this.props.fetchPosts();

}

  handleInputChange = (event, id) => {
    console.log(event.target.name)
    console.log(event.target.value)
    console.log(this.props.posts)
    this.setState({
      [event.target.name]: event.target.value,
      postId: id

    })
  }

  displayGifPicker = () => {
    this.setState({
      displayGifPicker: !this.state.displayGifPicker
    })
}

getGifState = (selectedUrl) => {
  this.setState({ giphyUrl: selectedUrl})
}

  render () {
    const reversedProps = this.props.posts.reverse();

    const {title, postBody} = this.state
    const displayGifPicker = this.state.displayGifPicker
    return (
      <Grid item xl={8}>
        {this.props.posts.map((post, index) =>
          <PostBodyTemplate key={index} postId={post.id} onChange={e => this.handleInputChange(e,post.id)} />
           )} 
     </Grid>
    )
  }

}

NewPostBody.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  // user: PropTypes.array.isRequired
  posts: PropTypes.array.isRequired,
}

const mapStateToProps = state =>({
  // user: state.user.items,
  posts: state.posts.items,

})

export default connect(mapStateToProps, { fetchPosts })(NewPostBody);

This is the PostBodyTemplate

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
}));

const fr = {
  float: 'right'
}

const giphyRes = {
    width: '300px',
    height: '300px'
}

         export default function PostBodyTemplate(props, onChange, onSubmit) {

             const classes = useStyles();
            //  render() {
                 return (
                    <Grid item xs={12} xl={8} lg={8} style={fr}>
                    <Card className={classes.card}>
                    <CardContent>
                    <Paper className={classes.root}>
                    <Typography variant="h5" component="h2" style={fr}>
                          {props.userWhoPosted} Gave A VH5 To Julio {props.postId}
                      </Typography>
                        <Typography variant="h5" component="h3">
                          {props.title}
                        </Typography>
                        <Typography component="p">
                          {props.postBody}
                        </Typography>
                        <img src={props.giphyUrl} style={giphyRes}/>
                    </Paper>
                    </CardContent>
                    <CardActions>
                    <IconButton aria-label="add to favorites">
                        <FavoriteIcon />
                        <div>Add Gif</div>
                      </IconButton>
                      <IconButton aria-label="share">
                        <EcoIcon />
                        <div>Add Photo</div>
                      </IconButton>
                      <form onSubmit={onSubmit}>
                        <div className={classes.container}>
                        <TextField
                                   onChange = {onChange}
                                    name='commentBody'
                                    id="standard-full-width"
                                    label="Reply To Post"
                                    style={{ margin: 8 }}
                                    placeholder="Reply to Post"
                                    fullWidth
                                    margin="normal"
                                    InputLabelProps={{
                                    shrink: true,
                                    }}
                            />
                          {/* <p><button>Send VH5</button></p> */}
                          <Button onSubmit={onSubmit} size="small">Submit</Button>
                        {/* <button onSubmit={onSubmit}>Submit Reply</button> */}

                        </div>
                      </form>
                      {/* <CommentInput onChange={onChange}/> */}
                      {/* <Button size="small">Submit</Button> */}
                    </CardActions>
                    <Paper className={classes.root} value={props.postId}>
                        <Typography variant="h5" component="h3">
                        {props.commentBody}
                        </Typography>
                        <Typography component="p">
                          {props.userIdName} replied to the post. 
                        </Typography>
                    </Paper>
                  </Card>
                  </Grid>
                 )
            //  }
         }

Answer 1

Just pass it to your handler

  <PostBodyTemplate onChange={e => this.handleInputChange(e,post.id)} />

And inside handleChange

handleInputChange = (event, id) => {
    console.log(event.target.name)
    console.log(event.target.value)
    console.log(this.props.posts)
    this.setState({
        [event.target.name]: event.target.value,
        postId: id
    })
}

Notice that You're already using arrow function notation, so you don't need to bind.

You're also receiving props incorrectly inside PostBodyTemplate. The following

export default function PostBodyTemplate(props, onChange, onSubmit)

Should be

export default function PostBodyTemplate({onChange, onSubmit}){}

Or

export default function PostBodyTemplate(props){
    const { onChange, onSubmit} = props
}