1

I have an array of variable names stored in the state of my functional component - ['firstName', 'lastName', 'userName]. I'm looping over this array to verify that these values are not null in state.

Normally, with a class-based component, I'd be able to use these strings to get their values from state like: this.state['firstName']. But I'm using a functional component that used the useState hook to initialize these values. If I'm looping through my string array, what do I call to get the value from state?

This is sample code to give you an idea of what I'm trying to accomplish:

const MyComponent = (props) => {
   const [ firstName, setFirstName ] = useState(null);
   const [ lastName, setLastName ] = useState(null);
   const [ userName, setUserName ] = useState(null);
   const [ otherField, setOtherField ] = useState(null);

const requiredFields = ['firstName', 'lastName', 'userName'];

const verifyRequiredFields = () => {
   requiredFields.forEach((field) => {
      if (state[field] !== null) { ... } // HERE IS THE PROBLEM - HOW DO I GET STATE?
   }
}
...
L Becker
  • 685
  • 8
  • 28

2 Answers2

2

create one state for the componet which combine the firstName,lastName,userName like this :

const MyComponent = (props) => {
   const [state, setState] = useState({firstName:"",lastName:"",userName:""});
   const [ otherField, setOtherField ] = useState(null);

const requiredFields = ['firstName', 'lastName', 'userName'];

const verifyRequiredFields = () => {
   requiredFields.forEach((field) => {
      if (state[field] !== null) { ... } // HERE IS THE PROBLEM - HOW DO I GET STATE?
   }
}
...

and if you are handling input change for each field you can do it like this now:

const handleChange = (event)=>{
const {name,value} = event.target
setState(current=>({...current,[name]:value}))
}

<input name="firstName" value={state.firstName} onChange={handleChange}/>
adel
  • 3,436
  • 1
  • 7
  • 20
1

maybe use eval:

eval(field) // if the value of field is 'firstName',
            // then eval(field) will be the value of firstName.
yaya
  • 7,675
  • 1
  • 39
  • 38
  • `eval` should _always_ be avoided. Context: https://stackoverflow.com/a/1832957/1913185 – technogeek1995 Aug 05 '20 at 19:57
  • 1
    @technogeek1995 agree, that's why i added `maybe` before answer, to let him only use it if he really wants. – yaya Aug 05 '20 at 19:59
  • @technogeek1995 it's interesting that you reply to a JavaScript question with a Python answer. For small cases, `eval` is indeed the best answer in cases where you need to know the variable name (as in, _precisely_ this case)). Hiding behing broad principles is usually bad, and assuming that everybody does OO (that detestable practice!) is even worse. This is the best answer. – Ricardo Jun 01 '23 at 14:35
  • 1
    @Ricardo Thanks for the kindness, but actually he's right for this question. (the OP is not a pro react programmer. he's solving a normal coding problem that doesn't need eval, with a wrong approach. so if we assume the question is right, this answer is right. but if we assume the question may not be totally right, then the answer also may not be totally right. this is not the right solution for the real coding challenge he's trying to solve.) (But if you're a pro and you know what you're doing, then the question is right and then the answer may be correct and suits.). – yaya Jun 01 '23 at 14:59