I'm working on a react app and using useState to create a state, which will be sent via props and the sendData function (which updates state via props in the parent component). It works right now, but seems very unelegant/just plain bad. I know how to implement useState as a base case, but I'm trying to find out if there is an easier way to define lots of variables for useState. My question was closed because it was apparently the same as another question, when in fact it is not.
const [acrobatics, setAcrobatics] = useState("");
const [animalHandling, setAnimalHandling] = useState("");
const [arcana, setArcana] = useState("");
const [athletics, setAthletics] = useState("");
const [deception, setDeception] = useState("");
const [history, setHistory] = useState("");
const [insight, setInsight] = useState("");
const [intimidation, setIntimidation] = useState("");
const [investigation, setInvestigation] = useState("");
const [medicine, setMedicine] = useState("");
const [nature, setNature] = useState("");
const [perception, setPerception] = useState("");
const [performance, setPerformance] = useState("");
const [persuasion, setPersuasion] = useState("");
const [religion, setReligion] = useState("");
const [sleightOfHand, setSlightOfHand] = useState("");
const [stealth, setStealth] = useState("");
const [survival, setSurvival] = useState("");
const skillList = ["Acrobatics", "AnimalHandling", "Arcana", "Athletics", "Deception", "History", "Insight", "Intimidation", "Investigation", "Medicine", "Nature", "Perception", "Performance", "Persuasion", "Religion", "SlightOfHand", "Stealth", "Survival"]
const skillSet = [setAcrobatics, setAnimalHandling, setArcana, setAthletics, setDeception, setHistory, setInsight, setIntimidation, setInvestigation, setMedicine, setNature, setPerception, setPerformance, setPersuasion, setReligion, setSlightOfHand, setStealth, setSurvival]
const callBackMethod=(value)=>{
sendData(value);
}
useEffect(()=>{callBackMethod({Acrobatics: acrobatics, AnimalHandling: animalHandling, Arcana: arcana, Athletics: athletics, Deception: deception, History: history, Insight: insight, Intimidation: intimidation, Investigation: investigation, Medicine: medicine, Nature: nature, Perception: perception, Performance: performance, Persuasion: persuasion, Religion: religion, SlightOfHand: sleightOfHand, Stealth: stealth, Survival: survival})},[acrobatics, animalHandling, arcana, athletics, deception, history, insight, intimidation, investigation, medicine, nature, perception, performance, persuasion, religion, sleightOfHand, stealth, survival])
As you can see, the above is very wordy for what I want to do. I feel like this is bad practice, and if a prospective employer looked at my code they would no longer want to hire me. How can I simplify this so it doesn't take 50 lines to write.