Estoy intentando crear un componente que represente dinámicamente una cantidad de entradas para una cantidad de idiomas proporcionada. Esto funciona, pero tengo problemas para hacer que este componente sea reutilizable al hacer que el atributo que se actualiza sea dinámico.

 type Props = { formState: [any, any]; id: string; attribute: string; languages: string[]; value: TranslatableString; }; const TranslatableFieldInput = (props: Props) => { const intl = useIntl(); const [fields, setFields] = props.formState; return <> {props.languages.map((language: string) => ( <Input id={props.id + language} name={props.attribute + '-' + language} type="text" label={intl.formatMessage({ id: ("general.languages." + language) })} onChange={e => { let value = fields[props.attribute] value[language] = e.target.value; setFields({fields, attribute: value}); }} value={props.value[language]} required key={props.id + language} /> )) } </> }; export default TranslatableFieldInput;

Mi problema viene con setFields({fields, attribute: value}); . Esto tiene la clave de attribute codificada de forma rígida. Me gustaría tomar cualquiera que sea el valor de la cadena props.attribute y usarlo como clave. Por ejemplo, si props.attribute es "name" , entonces el código se evaluaría como setFields({fields, name: value});

Intenté buscar métodos como setKey o algo equivalente pero sin alegría. ¿Cómo puedo lograr lo anterior?

Gracias por adelantado.