Set data in useWeb3ExecuteFunction fetch

Moralis General
#1

Hi!
Any know what set data in useWeb3ExecuteFunction or fetch next i compile form? because if set data before code work, but if i set data next , code don’t work.

this problem :


params: {
            to : account,
            _name : "imp",//String(statisticNft.name),
            _lifepoint :11,// Number(statisticNft.lifepoint),
            _power: 1,//(statisticNft.power),
            _dex : 1, //Number(statisticNft.dex),
            _stamina :1, // Number(statisticNft.stamina),
            _speed :1 // Number(statisticNft.speed),
        },

import { Button,
    FormControl,
    FormLabel,
    FormErrorMessage,
    FormHelperText,
  NumberInput,NumberInputField, NumberIncrementStepper,NumberDecrementStepper,Input,NumberInputStepper} from '@chakra-ui/react';
import React,{useState} from 'react'
import { useWeb3ExecuteFunction} from 'react-moralis'
import { useMoralis } from 'react-moralis';
import StikiWar from '../../contract/StikiWar.json'



export default function MintingStiki() {
    const { user,account } = useMoralis();
    const [stat,setStat] = useState(15);
    const [statisticNft, setStatisticNft] = useState({
      name : "",
      lifepoint : 11,
      power: 1,
      dex : 1,
      stamina : 1,
      speed : 1,
    })
    
    const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction({
        abi: StikiWar.abi,
        contractAddress: StikiWar.networks[1337].address,
        functionName: "mint",
        params: {
            to : account,
            _name : "imp",//String(statisticNft.name),
            _lifepoint :11,// Number(statisticNft.lifepoint),
            _power: 1,//(statisticNft.power),
            _dex : 1, //Number(statisticNft.dex),
            _stamina :1, // Number(statisticNft.stamina),
            _speed :1 // Number(statisticNft.speed),
        },

      });
      function PointAvvalible(){
        setStat(15 - (statisticNft.lifepoint,statisticNft.dex,statisticNft.power,statisticNft.speed,statisticNft.stamina))
      }

      function arise(){
        fetch();
      }
 
      
  return (
    <FormControl>
      <FormLabel htmlFor='first-name'>Warrior Name</FormLabel>
      <Input id='name' type='text'  onChange={(e)=>setStatisticNft({name:e.target.value})} />
      <FormHelperText>Set name for your nft</FormHelperText>
      <FormLabel htmlFor='amount'>Set stat points: {stat} </FormLabel>
        LifePoint
        <NumberInput min={1} onChange={(e)=>{setStatisticNft({lifepoint : e})}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Power
        <NumberInput min={1} onChange={(e)=>{setStatisticNft({power : e})}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Dex
        <NumberInput min={1} onChange={(e)=>{setStatisticNft({dex : e})}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Stamina
        <NumberInput min={1} onChange={(e)=>{setStatisticNft({stamina : e})}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Speed
        <NumberInput min={1} onChange={(e)=>{setStatisticNft({speed : e})}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        <Button onClick={()=>arise()}>Arise {statisticNft.name}</Button>
    </FormControl>
  )
}
#2

Hey can you tell us more details? I dont really understand the problem here

1 Like
#3

if i use this useState:

const [statisticNft, setStatisticNft] = useState({
      name : "",
      lifepoint : 11,
      power: 1,
      dex : 1,
      stamina : 1,
      speed : 1,
    })

transaction dont run because constant are undefine.

but if set use state one to one code run…

export default function MintingStiki() {
    const { user,account } = useMoralis();
    const [stat,setStat] = useState(15);
   
    const [name,setName] = useState()
    const [lifepoint, setLifepoint] = useState()
    const [power,setPower] = useState()
    const [dex,setDex] = useState()
    const [stamina, setStamina] = useState()
    const [speed, setSpeed] = useState()

    const { data, error, fetch, isFetching, isLoading } = useWeb3ExecuteFunction({
        abi: StikiWar.abi,
        contractAddress: StikiWar.networks[1337].address,
        functionName: "mint",
        params: {
            to : account,
            _name : name,
            _lifepoint : lifepoint,
            _power: power,
            _dex : dex,
            _stamina :stamina,
            _speed :speed
        },
      });

    
      function arise(){ 
        fetch();  
      }
 
  return (
    <FormControl>
      <FormLabel htmlFor='first-name'>Warrior Name</FormLabel>
      <Input id='name' type='text'  onChange={(e)=>{ setName(e.target.value)}} />
      <FormHelperText>Set name for your nft</FormHelperText>
      <FormLabel htmlFor='amount'>Set stat points: {stat} </FormLabel>
        LifePoint
        <NumberInput min={1} onChange={(e)=>{setLifepoint(+(e))}}>
          <NumberInputField id='amount' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Power
        <NumberInput min={1} onChange={(e)=>{setPower(+(e))}}>
          <NumberInputField id='Power' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Dex
        <NumberInput min={1} onChange={(e)=>{setDex(+(e))}}>
          <NumberInputField id='Dex' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Stamina
        <NumberInput min={1} onChange={(e)=>{setStamina(+(e))}}>
          <NumberInputField id='Stamina' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        Speed
        <NumberInput min={1} onChange={(e)=>{setSpeed(+(e))}}>
          <NumberInputField id='Speed' />
          <NumberInputStepper>
          <NumberIncrementStepper />
          <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        <Button onClick={()=>arise()}>Arise {name}</Button>
    </FormControl>
  )
}
#4

it says undefined because here youre updating the state in a wrong way, by doing this you are changing the whole

{
      name : "",
      lifepoint : 11,
      power: 1,
      dex : 1,
      stamina : 1,
      speed : 1,
}

and it becomes

{
    name:e.target.value
}

you shoud instead have it this way to only update one key of the object. And do the same for the other ones

setStatisticNft(previousState => {
     ...previousState,
     name: e.target.value
})

All this info comes from react functional updates, take a look

2 Likes
#5

at end i have a suspect that i change all varible… thnk for your help, i will read documentation on react .

1 Like