score:2

Accepted answer

first of all, you have access to the props of the component everywhere on the component using "this.props.propname". you just have to remember that if you are using "this" keyword inside a component method you have to bind it (on constructor or whatever) or use an arrow function instead of class method.

you also have access to the form fields when using onsubmit through the form itself passed with the event object, you can use event.target.elements to get an array of the form controls (inputs, button, selects, etc.)

and lastly, if you want to submit the form, you can use the submit() method inside your handlesubmit with again the form you get from the event like so: event.target.submit(). but i can see you are using the fetch api, so it is like you are already submitting the form like that. you can try to set the url on the form tag as the action attribute and submit the form with the submit() if it passes your validation.

more info on the submit() method on w3schools

more info on accessing form.elements on w3schools

binding functions to components - to use "this" keyword inside them

for example:

<form id="additem" method="post" action={`/api/additem/${this.props.matchid}`} onsubmit={this.handlesubmit}>
  <form.group>
    <form.row>
      <col xs={6}>
.
.
.
  </form.group>
  <form.control type="submit" id="additemsubmit" name="add" value="submit" />
  
  
  
  handlesubmit = (e) => {
    e.preventdefault();
    // your validation logic here
    // you can use e.target.elements to access the array of the form controls
    if (isvalid) {
      e.target.submit(); //submitting the form to the link in action
    } else {
      console.log('errors on form');
    }
  }

on the other hand, as others already commented on your question, you can make your component as controlled component, which basically means that each form control will have a value on your state and you will have access to all the fields values in state.

controlled components from reactjs docs


Related Query

More Query from same tag