How to dynamically create the name of an Array to be sorted using React JS?

Question

I am having some issues due to my lack of experience basically.

So I am trying to do this form on react where the user needs to select two values first, and based on these two values, a third value to choose will be available. But this third value displays options based on the first two chosen.

So the first two inputs are working fine, and I even have them destructured and going in to state.

   // Final Hook
    const [finalData, setFinalData] = useState({
        name: name,
        userId: id,
        study: 'Architecture',
        courses: '',
        year: '1',
        catedra: '',
        mesFinal: '2',
        anoFinal: '',
        imagenes: '',
        contenido: ''


      });
      // Destructure 
      const {year, courses, catedra, mesFinal, anoFinal, imagenes, study, contenido} = finalData;
      let list = study + year;

Basically I want to have a couple of arrays to give out options. For example, if user pics Architecture as a study, and chooses the year 1, then automatically the options for courses will be suggested on the courses input.

Goes on like this

 // Changes data for AutoSuggest - courses
      const onChange1 = (e) => {
        const value = e.target.value;
        let suggestions = [];

        setFinalData({...finalData, [e.target.name]: value});
        if (value.length > 0) {
          const nameReg = `^${value}`;
          const regex = new RegExp(nameReg, 'i');


          suggestions = thisIsWhatIwantToBeDynamic.sort().filter(v => regex.test(v));


        }

So if the user pics out Architecture and Year 1, I have an Array loaded with the options as strings:

  const Architecture1 = [
      'FAA',
      'ITC',
      'ITE',
      'IAC'
  ]

So basically I want the " thisIsWhatIwantToBeDynamic " to be either, Architecture1, or Architecture2, or GraphicDesign1, etc... depending on what the user selected before.

I already have a let variable made which when I console log it, its working fine, and its available globally

let list = study + year;

SO if user selected ARCHITECTURE year 1,

list will output = Architecture1

How can I use this value to replace the thisIsWhatIwantToBeDynamic , in order to sort the corresponding object??

Thanks in advance

Answer 1

If I understand correctly, you want to get the suggestions associated to a list that has the format [subject name][year] . So for Architecture1 , suggestions would be ['FAA', 'ITC', 'ITE', 'IAC'] .

I think this can be achieved by creating an object where the keys are all the possible list values and where the associated values are the relevant suggestions , like so:

const suggestionsList = {
  Architecture1:  ['FAA', 'ITC', 'ITE', 'IAC'],
  GraphicDesign1: ['GGG', 'LLL'],
  // ... etc
}

And then, in your onChange , getting the right data from this object like so:

const suggestions = suggestionsList[list]

For the example of Architecture1 , this is doing the same as

const suggestions = suggestionsList.Architecture1

It is known as the bracket notations property accessor, as seen here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

And it is a JavaScript thing, not a React thing ^^

EDIT: re-reading your issue, I seem to have misunderstood. Are you asking how to create Architecture1 in the onChange ? If so, is your form state tracking the previous values entered? And if yes, I think it should be possible to get the value from the propose suggestionsList object in this way, in the scope of onChange :

const list = finalData.study + finalData.year
const suggestions = suggestionsList[list]