0

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.

sbrevolution5
  • 183
  • 2
  • 11
  • which updates state via props in the parent component) -> this is the part that sounds like bad practice to me. can you show that code? it's hard to tell what your callback function is doing – azium Feb 10 '21 at 15:42
  • The source code can be found at https://github.com/sbrevolution5/xml-monster-muncher. – sbrevolution5 Feb 10 '21 at 16:00

0 Answers0