0
Next, I’m creating an app and came across this problem: I have a store set and want to create a data update form in Atlas (Mongodb). But I want this form, already come with the values that are in the store. So far so good... Now my question is: How to create a handleChange for this situation? Since only access the data in this case is not enough...
**NOTE: The data is something like:
(5) [{…}, {…}, {…}, {…}, {…}]
0: {date: {…}, _id: "5d66d1ffaafb603850a450be", value: 359, category: "Mercado", author: "5d66bb426d80e62f54d02724", …}
1: {date: {…}, _id: "5d66d5f9aad2665674d2be1f", value: 359, category: "Cartão", author: "5d66bb426d80e62f54d02724", …}
2: {date: {…}, _id: "5d6aafa4b89a1d11a08f1890", value: 4500, category: "Salário", author: "5d66bb426d80e62f54d02724", …}
3: {date: {…}, _id: "5d6ab44bb89a1d11a08f1893", value: 112, category: "Salário", author: "5d66bb426d80e62f54d02724", …}
4: {date: {…}, _id: "5d6ab458b89a1d11a08f1894", value: 1000, category: "Salário", author: "5d66bb426d80e62f54d02724", …}
length: 5__proto__: Array(0)
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Actions from '../../redux/actions'
// import useForm from '../../useHooks/useForm'
const Crud = ({title}) => {
const wallet = useSelector(state => state.wallet)
const dispatch = useDispatch()
let data = []
let patch = ''
let deleteItem = ''
if(title === "Entradas") {
data = wallet.entrys.all
patch = (id) => {
dispatch(Actions.entryUpdReq(id))
}
deleteItem = (id) => {
dispatch(Actions.delEntryReq(id))
}
} else if(title === "Despesas") {
data = wallet.outs.all
patch = (id) => {
dispatch(Actions.outUpdReq(id))
}
deleteItem = (id) => {
dispatch(Actions.delOutReq(id))
}
}
return (
<div className="crud">
<table>
<tr>
<th valign="center">Valor</th>
<th>Categoria</th>
<th>Data</th>
<th>Opções</th>
</tr>
{!wallet.loading && wallet.entrys.all && wallet.outs.all && data.length >=1 ?
<>
{data.map(item => {
return (
<tr>
<td><input value={item.value} /></td>
<td><input value={item.category} /></td>
<td>{`${item.date.day} de ${item.date.month}`}</td>
<td className="btn-opts">
<button onClick={() => deleteItem(item._id)}>Deletar</button>
<button onClick={() => patch(item._id)}>Salvar</button>
</td>
</tr>
)
})}
</> :
<p>Carregando...</p>
}
</table>
</div>
)
}
export default Crud
You speak Gabe, beauty? Let me try to understand: Do you want to make an onChange to change the value that is already in the Redux store? From what I saw in your code, you take the data, put it in the input and let the user change the data, check?
– Carlos Querioz
That’s right, I’ve actually been able to sort it out... pretty rough, you know, when you can’t think of anything? That was the moment, I spent a few minutes watching some videos watching nothing on youtube and I got, I created a state with the value of the store, so I can change it only in the component without interfering in anything... But Carlos, thank you so much! <3
– Gabe Leon
Tranquil Gabe. I believe this approach there is better and consumes less resource. Success for you.
– Carlos Querioz