Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

98
Visualizações
How to modify attributes of state with object declaration in React from string input

I am developing a table to get user input. So, I am using textFields or autocompletes to get the values, and depending on the value change the border color and the helperText. Table

Each cell has it's onChange:

onChange={(e)=>{
          setState(prevState=>({
            ...prevState,
            runTimeStamp:{
              ...prevState.runTimeStamp,
              helperText:state.runTimeStamp.evaluateHelperText(e.target.value),
              focused:true,
              error:state.runTimeStamp.evaluateHelperText(e.target.value)? true: false,
              color:state.runTimeStamp.evaluateColor(e.target.value,
                state.runTimeStamp.evaluateHelperText(e.target.value)? true: false)
            }
          }))
        }}

At this example the column is runTimeStamp. I'd like to make it become a function to have inside the onChange just the callBack, like this:

onChange={InputChange}

Is there a way to pass the column name as a string and became the setState generic?

Ex:

const InputChange =(e)=>{
          let name = e.target.name
          setState(prevState=>({
            ...prevState,
            runTimeStamp:{
              ...prevState.name,
              helperText:state.name.evaluateHelperText(e.target.value),
              focused:true,
              error:state.name.evaluateHelperText(e.target.value)? true: false,
              color:state.name.evaluateColor(e.target.value,
                state.name.evaluateHelperText(e.target.value)? true: false)
            }
          }))
        }}

The state is as follow:

  const [state,setState] =useState({

testName:{
  defaultValue:file_name,
},

runTimeStamp:{
  helperText: '',
  error: '',
  color:'',
  focused: false,
  evaluateHelperText:(text)=>{
    if (text === undefined || text === "") {
      return "Required"
    } else if (text.length < 3) {
      return "Name should contains at least 3 chars"
    }
    return false
  },
  evaluateColor:(text,error)=>{
    if(text==''){
      return "warning"
    }
    else {
      return error? 'error':'success'
    }
  },
},
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda