tengo un problema, estoy pasando algunos valores como defaultvalues en un par de inputs en react, la propiedad value me devuelve un de los valores, el otro lo pude sacar usando UseRef, ero el valor se queda estatico, y no cambia al seleccionar otro valor de el input select,
la idea de este componente es que cada vez que yo cambio de moneda usando el input select, automaticamente, se pasen los valores public_key y private_key, solo puedo obtener private que viene de el value y el public, lo intente sacar con el hook useRef() pero no es dinamico y me lo pasa al estado para todos las opciones, que puedo hacer? gracias.
import { useRef } from "react";
import { useEffect, useState } from "react";
import Blocks from './Blocks'
const Transaction = () => {
const keyvalue = useRef()
const [wallet,setWallet]=useState([])
const [newTransaction, setNewTransaction]=useState({
key:'',
from:'',
to:'',
amount:'',
})
const setData = () => {
let status = keyvalue.current.getAttribute("data-key");
console.log("status", status);
};
useEffect(()=>{
getWallets()
},[])
const handleChange= e=>{
setNewTransaction({
...newTransaction,
[e.target.name]:e.target.value,
})`setData()`
}
const submitTransaction = e=>{
e.preventDefault()
console.log(newTransaction)
}
const cancelTransaction=()=>{
window.location.href='/home'
}
const getWallets = async()=>{
const token = sessionStorage.getItem('token')
const idUser = sessionStorage.getItem('idUser')
const url = 'http://localhost:4000/wallets/walletslist/'+idUser
const myHeaders ={
method: 'GET',
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json',
mode:'cors',
autorization:token
},
}
const request=await fetch(url,myHeaders)
const response = await request.json()
setWallet(response)
}
return (
<div>
<form onSubmit={submitTransaction}>
<div>
<select name='key' onChange={handleChange}>
<option value="error">--select wallet--</option>
{wallet.map(wallet=>(
<option key={wallet._id} ref={keyvalue} data-key={wallet.public_key} value={wallet.private_key}>{wallet.name}</option>
))}
</select>
<label>your sign address wallet</label>
<input type="text" style={{width:'500px'}} name='key' defaultValue={newTransaction.key} />
<label>your address wallet</label>
<input type="text" style={{width:'940px'}} name="from" defaultValue={newTransaction.from} />
<label>to address</label>
<input type="text" name='to' required />
<label>amount</label>
<input type="number" name="amount" onChange={handleChange} required />
</div>
<div>
<input type="submit" value="send transaction" required />
</div>
<div>
<button type='button' onClick={cancelTransaction}>cancel</button>
</div>
</form>
<div>
<Blocks/>
</div>
</div>
);
}
export default Transaction;