Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

97
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!