Insert with React-Hook-Form - mysql

Question

I have a modal with a React-Hook-Form that send data to my API and saves it in a MySql database, but when i click on the button, only 4 columns are filled('id', createdAt, updatedAt and user_id), and I have more 3 columns('title', 'description', 'photo').
export default function FeedModal() {
const [form, setForm] = useState([]);
const { register, handleSubmit, setValue } = useForm();
const [isModalVisible, setModalVisible] = useState(false);
useEffect(() => {
register({ title: 'title' });
register({ description: 'description' })
}, [register]);
const onSubmit = async ({ title, description, photo }) => {
const data = { title, description, photo };
await api.post('/posts/1/create')
.then(response => setForm(response(data)))
.then(JSON.stringify(form))
.catch(console.error());
return () => handleSubmit(onSubmit);
}
const toogleModal = () => {
setModalVisible(!isModalVisible);
}
My form:
<View style={styles.Card}>
<View style={styles.pubCard}>
<Text style={styles.intro}>Criar publicação</Text>
<TextInput
value={form.title}
name={'title'}
ref={register({ required: true })}
onChangeText={text => setValue("title", text, { shouldValidate: true })}
multiline={true}
style={styles.titleInput}
placeholder="Titulo">
</TextInput>
</View>
<View style={styles.btnView}>
<TouchableOpacity style={styles.upload} title="Selecionar Foto" >
<Text style={{ color: 'white', fontFamily: 'Montserrat_400Regular', textAlign: 'center' }}>Selecionar Foto</Text>
</TouchableOpacity>
</View>
<KeyboardAvoidingView style={styles.descView}>
<TextInput
value={form.description}
name={"description"}
ref={register({ required: true })}
onChangeText={text => setValue("description", text)}
multiline={true}
style={styles.descInput}
placeholder="Nos descreva com detalhes sobre o caso do seu Pet"></TextInput>
</KeyboardAvoidingView>
<View style={styles.buttons}>
<TouchableOpacity onPress={toogleModal} style={styles.ButtonClose}><Text style={{ color: 'white', fontFamily: 'Montserrat_400Regular' }}>Fechar</Text></TouchableOpacity>
<TouchableOpacity onPress={handleSubmit(onSubmit)} style={styles.ButtonClose}><Text style={{ color: 'white', fontFamily: 'Montserrat_400Regular' }}> Criar</Text></TouchableOpacity>
</View>
</View>

Answer 1

perhaps useFieldArray will be the better usage here since you are talking about the insert.
https://react-hook-form.com/api#useFieldArray
you can then use the insert action. eg:
import React from "react";
import { useForm, useFieldArray } from "react-hook-form";
function App() {
const { register, control, handleSubmit, reset, trigger, setError } = useForm({
// defaultValues: {}; you can populate the fields by this attribute
});
const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
control,
name: "test"
});
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<ul>
{fields.map((item, index) => (
<li key={item.id}>
<input
name={`test[${index}].firstName`}
ref={register()}
defaultValue={item.firstName} // make sure to set up defaultValue
/>
<Controller
as={<input />}
name={`test[${index}].lastName`}
control={control}
defaultValue={item.lastName} // make sure to set up defaultValue
/>
<button type="button" onClick={() => remove(index)}>Delete</button>
</li>
))}
</ul>
<button
type="button"
onClick={() => insert(1, { firstName: "appendBill", lastName: "appendLuo" })}
>
append
</button>
<input type="submit" />
</form>
);
}