How to get specific value from react Component - reactjs

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
}