Tukukkk

Update: scroll to see my solution, can it be improved?

So I have this issue, I am building a word translator thats translates english to 'doggo', I have built this in vanilla JS but would like to do it React.

My object comes from firebase like this

dictionary = [

    0: {

        name: "paws",

        paws: ["stumps", "toes beans"] 

    }

    1: {

        name: "fur",

        fur: ["floof"] 

    }

    2: {

        name: "what"

        what: ["wut"]

    }

]

I then convert it to this format for easier access:

dictionary = {

    what : ["wut"],

    paws : ["stumps", "toe beans"],

    fur : ["floof"]

}

Then, I have two text-area inputs one of which takes input and I would like the other one to output the corresponding translation. Currently I am just logging it to the console.

This works fine to output the array of the corresponding word, next I have another variable which I call 'levelOfDerp' which is basically a number between 0 - 2 (set to 0 by default) which I can throw on the end of the console.log() as follows to correspond to the word within the array that gets output.

dictionary.map(item => {

  console.log(item[evt.target.value][levelOfDerp]);

});

When I do this I get a "TypeError: Cannot read property '0' of undefined". I am trying to figure out how to get past this error and perform the translation in real-time as the user types.

Here is the code from the vanilla js which performs the translation on a click event and everything at once. Not what I am trying to achieve here but I added it for clarity.

function convertText(event) {

    event.preventDefault();

    let text = inputForm.value.toLowerCase().trim();

    let array = text.split(/,?s+/);

    array.forEach(word => {

      if (dictionary[word] === undefined) {

        outputForm.innerHTML += `${word} `;

        noTranslationArr.push(word);

      } else {

        let output = dictionary[word][levelOfDerp];

        if (output === undefined) {

          output = dictionary[word][1];

          if (output === undefined) {

            output = dictionary[word][0];

          }

        }

        outputForm.innerHTML += `${output} `;

        hashtagArr.push(output);

      }

    });

    addData(noTranslationArr);

  }

Also here is a link to the translator in vanilla js to get a better idea of the project https://darrencarlin.github.io/DoggoSpk/

Solution, but could be better..

I found a solution but I just feel this code is going against the reason to use react in the first place.. My main concern is that I am declaring variables to store strings inside of an array within the function (on every keystroke) which I haven't really done in React, I feel this is going against best practice?

  translate = evt => {



    // Converting the firebase object 

    const dict = this.state.dictionary;

    let dictCopy = Object.assign(

      {},

      ...dict.map(item => ({ [item["name"]]: item }))

    );



    let text = evt.target.value.toLowerCase().trim();

    let textArr = text.split(/,?s+/);

    let translation = "";



    textArr.forEach(word => {

      if (dictCopy[word] === undefined) {

        translation += `${word} `;

      } else {

        translation += dictCopy[word][word][this.state.derpLvl];

      }

    });

    this.setState({ translation });

  };

levelOfDerp is not defined, try to use 'levelOfDerp' as string with quotes.

   let output = dictionary[word]['levelOfDerp' ];

The problem happens because setState() is asynchronous, so by the time it's executed your evt.target.value reference might not be there anymore. The solution is, as you stated, to store that reference into a variable.

Maybe consider writing another function that handles the object conversion and store it in a variable, because as is, you're doing the conversion everytime the user inputs something.