2

I am a beginner starting out in react and having difficulties in state management while working with react-redux and useState. In the below code I am basically following a tutorial which passes in the this.state to the dispatch action createProject in the handleSubmit function as seen below.

class CreateProject extends Component {
  state = {
    title: '',
    content: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    // console.log(this.state);
    this.props.createProject(this.state);
  }
  render() {
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Create a New Project</h5>
          <div className="input-field">
            <input type="text" id='title' onChange={this.handleChange} />
            <label htmlFor="title">Project Title</label>
          </div>
          <div className="input-field">
            <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            <label htmlFor="content">Project Content</label>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createProject: (project) => dispatch(createProject(project))
  }
}

export default connect(null, mapDispatchToProps)(CreateProject)

Now, instead of using Class component I am using the functional component and using the useState hook. in the handleSubmit function how can I pass the state to the this.props.createProject() as this.props is not defined in-case of functional component and how to pass the state in place of this.state, will it be the projectinfo which stores the state or something else, I'm confused.

TLDR; I want to rewrite the this.props.createProject(this.state) line from the perspective of useState hook.

Below is the code I have written:

const CreateProject = () => {

    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');


    const handleSubmit = (e) => {
        e.preventDefault();

        const projectinfo = { title, content }

        this.props.createProject(projectinfo);

    }
    return(
        <div className="container">
            <form onSubmit={handleSubmit} className="white">
                <h5 className="grey-text text-darken-3">Create Task</h5>
                <div className="input-field">
                    <label htmlFor="title">Title</label>
                    <input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div className="input-field">
                    <label htmlFor="content">Content</label>
                    <textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>
                   
                </div>
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </form>
        </div>
    );

}

const mapDispatchToProps  = (dispatch) =>{
    return{
        createProject: (project) => dispatch(createProject(project)),
    };
}

export default connect(null, mapDispatchToProps)(CreateProject);

Any help or clues to understand this would be appreciated. Thank you!

1
  • Also, props is undefined in the second code which is causing an error.
    – nikkbh
    Mar 26, 2021 at 8:11

2 Answers 2

2

Just want to add some way to do it using react hooks (specifically useDispatch).

With hooks, you don't need to use connect() and mapDispatchToProps. Instead, you can do it like this:

const CreateProject = () => {
  const dispatch = useDispatch();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (e) => {
      e.preventDefault();

      const projectinfo = { title, content }

      // Use dispatch here
      dispatch(createProject(projectinfo));
  }

  return(
    <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">Create Task</h5>
            <div className="input-field">
                <label htmlFor="title">Title</label>
                <input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
            </div>
            <div className="input-field">
                <label htmlFor="content">Content</label>
                <textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>
               
            </div>
            <button className="btn pink lighten-1 z-depth-0">Create</button>
        </form>
    </div>
  );
}

export default CreateProject

createProject() is your action creators.

You can read more about useDispatch here: https://react-redux.js.org/api/hooks#usedispatch

0
1

Your dispatch isn't working because you're trying to access it via this.props. Assuming that createProject call inside the dispatch call in mapDispatchToProps is valid and there is a createProject function available in the scope of that file, what you need to do is this:

const CreateProject = (props) => { // Get props from the parameter.

    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');


    const handleSubmit = (e) => {
        e.preventDefault();

        const projectinfo = { title, content }

       props.createProject(projectinfo); // Replace this.props and use props

    }
    return(
        <div className="container">
            <form onSubmit={handleSubmit} className="white">
                <h5 className="grey-text text-darken-3">Create Task</h5>
                <div className="input-field">
                    <label htmlFor="title">Title</label>
                    <input type="text" value={title} id="title" onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div className="input-field">
                    <label htmlFor="content">Content</label>
                    <textarea id="content" className="materialize-textarea" onChange={(e) => setContent(e.target.value)}></textarea>
                   
                </div>
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </form>
        </div>
    );

}

const mapDispatchToProps  = (dispatch) =>{
    return{
        createProject: (project) => dispatch(createProject(project)),
    };
}

export default connect(null, mapDispatchToProps)(CreateProject);

This would work. I hope this answered and solved your issue.

4
  • Thank you for the answer, but if I remove props.createProject(projectinnfo) then how would I pass the state to the dispatch action?
    – nikkbh
    Mar 26, 2021 at 8:19
  • Hi. You don't have to remove it, just replace the line with what I gave in the answer. I'm guessing you looked at it before I had updated. I had fixed my wording after I wrote my original answer, but probably it didn't update for you at the time. Mar 26, 2021 at 17:50
  • I see you took the useDispatch route. I didn't suggest it because I assumed you were not using it based on your comfort level. A lot of people I know have been taking their time completely moving to hooks while my colleagues and I jumped right in when hooks had been introduced. Mar 26, 2021 at 17:53
  • Yeah, I am also pretty much new to hooks and it eases working with state, so useDispatch worked for me and pretty easy to understand.
    – nikkbh
    Mar 27, 2021 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.