ReactJS: Form values doesn't take values

Question

I have a form and when it is submitted I take the values with the function saveEntity.

Now in this form, I have some fields that are showed after some other values are chosen. From these fields, I don't receive any values on my saveEntity function.

export const MyFunctionName = (props) => {
   // code...    
   const saveEntity = (event, errors, values) => {
   console.log('values ', values);
   // other code
}


const RuoliChoosen = ruolo => {
    if (!ruolo.ruolo) {
      return <div />;
    }

    return (
      <div>
        <Row>
          <Col md="6">
            <AvGroup>
              <Label for="accessNumber">{'Access Number'}</Label>
              <AvInput
                id="accessNumber"
                data-cy="accessNumber"
                type="text"
                className="form-control"
                name="accessNumber"
              />
            </AvGroup>
          </Col>

             //.....
}

return(
            <AvForm model={isNew ? {} : userClientAuthorityEntity} onSubmit={saveEntity}>
               <AvInput
                  id="user-client-authority-application"
                  data-cy="application"
                  type="select"
                  className="form-control"
                  name="applicationId"
                  onChange={handleChange}
                  required
                >
                  <option value="" key="0">
                   Select Application
                  </option>
                  {applicationList
                    ? applicationList.map(value => {
                        return (
                          <option value={value.appCod} key={value.appCod}>
                            {value.appDesapplicazione}
                          </option>
                        );
                      })
                    : null}
                </AvInput>
   // this RuoliChoosen receive "ruoli" from another function (it works)
              <RuoliChoosen ruolo={ruoli} />
    )}

When I submit the form, I expect to see the values ​​in the saveEntity, in this case only values for application and accessNumber, but I receive only value for application.

How can I fix it? Thank you.

Answer 1

You sent ruolo as a prop where the component is called. But You sent it as an object. And then in that component where you receive this ruolo as prop it comes as an object. If you want to access it you have to destructure it. So change it.

from

const RuoliChoosen = ruolo => {
   return()
}

to

const RuoliChoosen = ({ruolo}) => {
       return()
    }

thanks.

Answer 2

Please format your code well when coding, since normally the format keeps up with your logic. Sometimes people are picky about the format, but really what they are saying is that they are not comfortable to read your code. Trust me, you don't want to get uncomfortable reading code ;)

const RuoliChoosen = ruolo => {

This isn't a component, instead

const RuoliChoosen = ({ ruolo }) => {

Because ruolo is a prop, not the entire props