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.
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
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.