CODEWITHSUNDEEP
javascriptreactjsredux
Jack23
Jack23

Reputation: 1396

React-Redux: Insert Data in DB

I'm learning to use react-redux, so sorry if I'm doing confusing!

I'm trying to create a form and insert data into the db.

Then I have created 2 page, one for the form and another one.

RequestForm

handleChange = (e) => {
    let meeting = this.state.meeting;
    meeting[e.target.name] = e.target.value;
    this.setState({ meeting });
  };

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.meeting);
    this.props.addMeeting(this.state)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>

        <div>
          <label>Motivation:</label>
          <input
            type="text"
            name="motivation"
            onChange={(event) => this.handleChange(event)}
          />
        </div>
        <div>
          <label>Date:</label>
          <input
            type="date"
            name="date"
            onChange={(event) => this.handleChange(event)}
          />
        </div>

MeetingRequest.js

import RequestForm from './RequestForm';
import { connect } from 'react-redux';
import {addMeeting} from '../Redux/actions';


class MeetingRequest extends Component {

  render() {
    const addMeeting = this.props
    return (
      <div>
        <h2>Request Meeting</h2>
        <RequestForm 
          addMeeting={addMeeting}
        />
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    addMeeting: (meeting) => dispatch(addMeeting(meeting)),
  };
}

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

EDIT. Thank you to the comments the firt error is resolved, now I have a 500 problem. Could it be a problem about the Actions.js??

And also in your opinion is right how I'm trying to do??

Thank you

Upvotes: 0

Views: 717

Answers (1)

Maxim Mazurok
Maxim Mazurok

Reputation: 4128

Change:

-const addMeeting = this.props
+const { addMeeting } = this.props

in MeetingRequest.js

Regarding your 500 error on API, it may be because you're sending JSON while setting multipart/form-data. Inspect using Network tab in dev tools. If your backend need multipart/form-data you have to convert your state.meeting object to FormData

Upvotes: 1

Related Questions