How to rerender fields selected by a dropdown? - reactjs

Question

im create a form using react-hook-from, and one of the fields that ive created is dynamic dropdown.
whenever im choosing one of the options im rendering some other text fields, depends on the the dropdown selection.
the problem is that when im submitting, im getting the fields of the other dropdown selection,
here is my code:
<FormGroup>
<Label>Automation Team</Label>
<Controller
name="team"
control={control}
as={Select}
options={ teams.map((team, index) => (
{ value: team.name, label: team.name}
)) }
defaultValue="Select component"
rules={{required: "Role is required" }}
isClearable
/>
</FormGroup>
<Row form>
{
getFields(teamComponent).map((field,index) => (
<Col key={index} md={4}>
<Label for={field}>{field}</Label>
<Input name={field} placeholder="with a placeholder" innerRef={register({required: true})}/>
{errors?.field?.types?.required &&
<small className="text-danger">Database name required</small>}
</Col>
) )
}
</Row>

Answer 1

so the problem was that I didnt used useEffect and didnt unregister from
last fields that was rendered.
Not the cleanest code bit it works for me :) .
so I refactored my code to look like this:
function TicketForm () {
const { register, unregister, handleSubmit, reset, formState: {isSubmitSuccessful, errors}, control, watch } = useForm({
mode: "onBlur",
criteriaMode: "all"
});
const teamComponent = watch("team")
const {isAuthenticated} = useAuthentication();
const [teams, setTeams] = useState([])
const [fields, setFields] = useState(0);
useEffect( () => {
if (isAuthenticated === true) {
getConfigurations(async response => {
setTeams(response.data.teams.Teams)
})
}
if (teamComponent )
onTeamChange(teamComponent)
}, [teamComponent])
const handleRegistration = async data => {
console.log(data)
}
const onTeamChange = c => {
if (!c) {
setFields([])
return
}
if (fields) {
fields.map((field,index) => {
unregister(field)
})
}
const result = teams.filter((team, index) => {
if(team.name === c.value) {
return team
}
})
if (result) {
setFields(result[0].Fields)
console.log(fields)
}
}
return (
<Form onSubmit={handleSubmit(handleRegistration)}>
<FormGroup>
<Label>Summary</Label>
<Input name="summary" innerRef={register({required: true})} />
{errors?.summary?.types?.required && <small className="text-danger">summary required</small>}
</FormGroup>
<FormGroup>
<Label>Description</Label>
<Input
type="textarea"
name="description"
innerRef={register({required: true})}
/>
{errors?.description?.types?.required && <small className="text-danger">description required</small>}
</FormGroup>
<FormGroup>
<Label for='team'>Automation Team</Label>
<Controller
control={control}
name="team"
innerRef={register({required: true})}
as={Select}
options={ teams.map((team, index) => (
{ value: team.name, label: team.name}
)) }
defaultValue=""
isClearable
/>
</FormGroup>
<Row form>
{
fields && fields.map((field,index) => {
//const fieldName = `field[${index}]`;
return (
<fieldset name={field} key={index}>
<Label for={field}>{field}</Label>
<Input name={field} placeholder="" innerRef={register({required: true})}/>
</fieldset>
)
}/*(
<Col key={index} md={4}>
<Label for={field}>{field}</Label>
<Input name={field} placeholder="with a placeholder" innerRef={register({required: true})}/>
{errors?.field?.types?.required &&
<small className="text-danger">Database name required</small>}
</Col>
)*/ )
}
</Row>
<Button type='submit' color="primary">Submit</Button>
</Form>
);}export default TicketForm;