React Hooks Antd props to update - reactjs

Question

I`m trying to pass the data from a table component to a form that opens when I press the edit button, I know how to do it with react Class but I'm trying with hooks but I still don't understand how to do it.
Here is an image of the table.
Here is an image of the form.
Index.js
const GestionUsuarios = () => {
const [data, setData] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const [visibleEdit, setVisibleEdit] = useState(false);
const [users, setUsers] = useState(null);
const [post, setPost] = React.useState(null);
const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');
const columns = [
{
title: 'ID',
dataIndex: 'id',
sorter: true,
key: 'id',
//render: name => `${name.first} ${name.last}`,
//width: '20%',
},
{
title: 'Tipo de usuario',
dataIndex: 'tipo',
filters: [
{ text: 'Administrador', value: '1' },
{ text: 'Supervisor', value: 'super' },
{ text: 'Expedicion Granulado', value: 'expg' },
{ text: 'Expedicion Silo', value: 'exps' },
{ text: 'Lectura', value: 'lectura' },
],
},
{
title: 'Nombre',
dataIndex: 'nombre',
},
{
title: 'Apellido',
dataIndex: 'apellido',
},
{
title: 'Alias',
dataIndex: 'username',
},
{
title: 'Email',
dataIndex: 'email',
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 100,
render: (_, record) => (
<div>
<Button
//onClick={() => retrieveConfig(record.id)}
onClick={() => {
setVisibleEdit(true);
}}
icon={<EditOutlined />}
/>
</div>
),
},
{
title: '',
key: 'action2',
fixed: 'right',
width: 100,
render: (_, record) => (
<Button
//onClick={() => deleteConfig(record.id, record.test_type)}
onClick={() => deleteRoute(record.id)}
icon={<DeleteOutlined />}
/>
),
},
];
useEffect(() => {
fetch('http://localhost:8080/api/usuarios', {
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
}).then((res) =>
res.json().then((result) => {
setUsers(result);
console.log(result);
})
);
}, []);
const onEdit = (response, id) => {
console.log('USUARIO A editar: ', response);
setVisible(false);
axios
.put(`http://localhost:8080/api/usuarios/${id}`, {
tipo: response.tipo,
nombre: response.nombre,
pass: response.pass,
username: response.username,
apellido: response.apellido,
email: response.email,
})
.then((response) => {
setPost(response.data);
window.location.reload();
});
};
return (
<div>
<Button
onClick={() => {
setVisible(true);
}}
type='primary'
style={{ marginBottom: 16 }}
>
Nuevo usuario
</Button>
<AddForm
visible={visible}
onCreate={onCreate}
onCancel={() => {
setVisible(false);
}}
/>
<EditForm
visible={visibleEdit}
onCreate={onCreate}
onCancel={() => {
setVisibleEdit(false);
}}
/>
<Table
columns={columns}
dataSource={users}
pagination={pagination}
loading={loading}
rowKey={(record) => record.id}
//onChange={this.handleTableChange}
//rowKey="id"
/>
</div>
);
};
export default GestionUsuarios;
EditForm.js
const EditFormUsuarios = ({ visible, onCreate, onCancel, props }) => {
const [form] = Form.useForm();
const [post, setPost] = React.useState(null);
const [userID, setUserID] = useState(null);
const [username, setUsername] = useState('');
const [dataform, setDatosForm] = useState({
id: '',
tipo: '',
nombre: '',
apellido: '',
username: '',
pass: '',
email: '',
});
const handleUserId = (id) => {
console.log('ID seleccionado: ', id);
//setVisible(false);
axios
.get(`http://localhost:8080/api/usuarios/${id}`, {
//.then(response => response.json())
})
.then((result) => {
setUserID(result);
console.log(result);
axios.put(`http://localhost:8080/api/usuarios/${result.id}`, {
tipo: result.tipo,
nombre: result.nombre,
apellido: result.apellido,
username: result.username,
pass: result.pass,
email: result.email,
//.then(response => response.json())
});
});
};
useEffect(() => {
/*if(this.props.item){
const { tipo} = this.props.item
this.setState({ tipo})
}
if(this.props.item){
const { nombre} = this.props.item
this.setState({ nombre})
}
if(this.props.item){
const { apellido} = this.props.item
this.setState({ apellido})
}
if(this.props.item){
const { username} = this.props.item
this.setState({ username})
}
if(this.props.item){
const { pass} = this.props.item
this.setState({ pass})
}
if(this.props.item){
const { email} = this.props.item
this.setState({ email})
}*/
}, []);
return (
<Modal
{...props}
visible={visible}
title='Editar usuario'
okText='Confirmar'
cancelText='Cancelar'
onCancel={onCancel}
onOk={() => {
form
.validateFields()
.then((values) => {
form.resetFields();
onCreate(values);
})
.catch((info) => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={form}
layout='vertical'
name='form_in_modal'
initialValues={{
modifier: 'public',
}}
>
<Form.Item
name='id'
label='Alias'
rules={[
{
required: true,
message: 'Introduce el alias',
},
]}
// onChange={e => setUsername(e.target.value)}
value={dataform && dataform.id}
></Form.Item>
<Form.Item
name='username'
label='Alias'
rules={[
{
required: true,
message: 'Introduce el alias',
},
]}
onChange={(e) => setUsername(e.target.value)}
value={dataform && dataform.username}
>
<Input />
</Form.Item>
<Form.Item
name='pass'
label='Contraseña'
rules={[
{
required: true,
message: 'Introduce la contraseña',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name='nombre'
label='Nombre'
rules={[
{
required: true,
message: 'Introduce el nombre',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name='apellido'
label='Apellido'
rules={[
{
required: true,
message: 'Introduce el apellido',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name='email'
label='Email'
rules={[
{
required: true,
message: 'Introduce el email',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name='tipo'
label='Tipo de usuario'
rules={[
{
required: true,
message: 'Introduce el tipo de usuario!',
},
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
);
};
export default EditFormUsuarios;

Answer 1

from index.js ===> onCreate={onCreate} ?? add the onEdit or related event handling function