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.

windmaomao · Accepted Answer · 2021-09-17 12:47:45Z

1

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

answered Sep 17, 2021 at 12:47

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack23 Over a year ago

Oh you are rigth, I use prettier on VSCode, it formats code for me :D Thank you, you found the error :)

Siam Ahnaf · Accepted Answer · 2021-09-17 14:52:55Z

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.

answered Sep 17, 2021 at 14:52

Siam Ahnaf

4504 silver badges15 bronze badges

Collectives™ on Stack Overflow

ReactJS: Form values doesn't take values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related