Not able to enter value on input field onChange prop

Question

I'm unable to input a value on the input field when selecting edit, i think it could be a onChange issue.

I look at something similar here, but the code seems to be outdated, and im using controlled components and not refs.

Editable.js this component renders an input field when edit is clicked

import React from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';

const Editable = (props) => (
    <div>
        <TextField
            id="outlined-name"
            label="Title"
            style={{width: 560}}
            name="title"
            value={props.editField}
            onChange={props.onChange}
            margin="normal"
            variant="outlined"/>

    </div>
)

export default Editable; 

PostList.js renders a list of the post items

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost} from '../actions/';
import Editable from './Editable';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}
class PostList extends Component{
    constructor(props){
        super(props);
        this.state ={
        }
    }
    // Return a new function. Otherwise the DeletePost action will be dispatch each
     // time the Component rerenders.
    removePost = (id) => () => {
        this.props.DeletePost(id);
    }
    onChange = (e) => {
        e.preventDefault();
        // maybe their is issue with it calling title from name in the editable 
        // component
        this.setState({
            [e.target.title]: e.target.value
        })
    }
    render(){
        const {posts, editForm, isEditing} = this.props;
        return (
            <div>
                {posts.map((post, i) => (
                    <Paper key={i} style={Styles.myPaper}>
                        <Typography variant="h6" component="h3">
                        {/* if else teneray operator */}
                        {isEditing ? (
                             <Editable editField={post.title} onChange={this.onChange}/>
                        ): (
                            <div>
                                {post.title}
                            </div>    
                        )}         
                        </Typography>
                        <Typography component="p">
                            {post.post_content}
                            <h5>
                                by: {post.username}</h5>
                            <Typography color="textSecondary">{moment(post.createdAt).calendar()}</Typography>
                        </Typography>
                        {!isEditing ? (
                            <Button variant="outlined" type="submit" onClick={editForm}>
                                Edit
                            </Button>
                        ):(
                            <Button variant="outlined" type="submit" onClick={editForm}>
                                Update
                            </Button>
                        )}
                        <Button
                            variant="outlined"
                            color="primary"
                            type="submit"
                            onClick={this.removePost(post.id)}>
                            Remove
                        </Button>
                    </Paper>
                ))}
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch) => ({
    // Pass id to the DeletePost functions.
    DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(null, mapDispatchToProps)(PostList);

Posts.js

import React, { Component } from 'react';
import PostList from './PostList';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {GetPosts} from '../actions/';
const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
  state = {
    posts: [],
    loading: true,
    isEditing: false, 
  }
  async componentWillMount(){
    await this.props.GetPosts();
    this.setState({ loading: false })
    const reduxPosts = this.props.myPosts;
    const ourPosts = reduxPosts  
    console.log(reduxPosts); // shows posts line 35
  }

  formEditing = () => {

    if(this.state.isEditing){
      this.setState({
        isEditing: false
      });
    }

    else{
      this.setState({
        isEditing:true
      })
    }
  }


  render() {
    const {loading} = this.state;
    const { myPosts} = this.props
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        <PostList  isEditing={this.state.isEditing} editForm={this.formEditing} posts={myPosts}/>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  myPosts: state.post.posts
})
const mapDispatchToProps = (dispatch, state) => ({
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

Answer 1

You're setting the value of the input with the property this.props.posts[index].title but you're handling the change through the PostLists state.

You should either delegate the onChange function to the component that's passing the list to your PostList component or store and update the list through the PostLists state.

Answer 2

you need to pass the value being set in change function

onChange = (e) => {
    e.preventDefault();
    // maybe their is issue with it calling title from name in the editable 
    // component
    this.setState({
        [e.target.title]: e.target.value
    })
}

youre setting the state of your edit field. You have to reference that value again when you reference your Editable.

<Editable editField={this.state.[here should be whatever e.target.title was for editable change event] } onChange={this.onChange}/>

in your editable component your setting the value to the prop editField.

 <TextField
            id="outlined-name"
            label="Title"
            style={{width: 560}}
            name="title"
            **value={props.editField}**
            onChange={props.onChange}
            margin="normal"
            variant="outlined"/>

hope that helps