How to display the arrays with different colors

Question

I have this webapp where user enters a paragraph and the backend scans the paragraph(s) and will send arrays of hard and very hard sentences. Now what I want to do is to show the entire paragraph with the hard and very hard sentences to be highlighted with a background color of yellow and red respectively while the sentences that are neither hard or very hard to be shown with just a default background color. At first, I thought it would be quite easy but the classes aren't even assigned to the arrays when it detects them. I tried to code it but it isn't showing the colors.

here's what I did so far:

class SomeComponent extends React.Component{
  this.state={
    hardArray: [],
    vhardArray: [],
    enteredText: "",
  }

  performHard = async () => {
    const { enteredText } = this.state;
    const body = { text: enteredText };
    const stringifiedBody = JSON.stringify(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: stringifiedBody
    };
    const url = "api/same";

    try {
      const response = await fetch(url, options);
      const result = await response.json();
      this.setState(prevState => ({
        hardArray: [...prevState.hardArray, ...result.hard]
      }));
    } catch (error) {
      console.error("error");
    }
  };

  performVHard = async () => {
    const { enteredText } = this.state;
    const body = { text: enteredText };
    const stringifiedBody = JSON.stringify(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: stringifiedBody
    };
    const url ="api/same";
    try {
      const response = await fetch(url, options);
      const result = await response.json();
      this.setState(prevState => ({
        vhardArray: [...prevState.vhardArray, ...result.very_hard]
      }));
    } catch (error) {
      console.error("error");
    }
  };

  performAnalysis = () => {
    this.performHard();
    this.performVHard();
  };

  render(){
    return(
        //some code
        <textarea
            name="enteredText"       
            className="textareaclass"
            placeholder="Enter your text here"
            onChange={this.handleChange}
            value={enteredText}
        ></textarea>
        <Button 
            className="rectangle-3" 
            onClick={this.performAnalysis}>Analyse
        </Button>
        <hr />
        <div>
            {
                enteredText.split(" ").map(word => {
                    if (this.state.vhardArray.includes(word)) {
                        return <span className="vhardColor">{word}</span>; //it didn't add these css classes
                    }

                    if (this.state.hardArray.includes(word)) {
                        return <span className="hardColor">{word}</span>;
                    }

                    return [word, " "];
                })
            }
        </div>
        //some code
    )
  }
}

This is suppose a paragraph that the user enters.

It's the possibility of having a dream come true that makes life interesting. He stepped down, trying not to look long at her, as if she were the sun, yet he saw her, like the sun, even without looking. I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation. Satan trembles when he sees the weakest saint upon their knees

then this is how the response from the api would look like

{
  "hard": [
    "It's the possibility of having a dream come true that makes life interesting",
    "I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation.",
  ]
 "very_hard": [
    “He stepped down, trying not to look long at her, as if she were the sun, yet he saw her, like the sun, even 
     without looking.”
  ],
"word_count": 132
}

Answer 1

Your api response is something like this

{
  "hard": [
    "It's the possibility of having a dream come true that makes life interesting",
    "I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation.",
  ]
 "very_hard": [
    “He stepped down, trying not to look long at her, as if she were the sun, yet he saw her, like the sun, even 
     without looking.”
  ],
 "word_count": 132
}

where hard and very_hard are arrays which you are storing in the react state.

But when you are checking whether the enteredText you are checking each word. As your are using includes it will check whether the given word is there in the array or not

Example

let hard = [
    "It's the possibility of having a dream come true that makes life interesting",
    "I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation.",
  ]
let word = "possibility"
// This is what you code is doing
hard.includes(word) //will return false as hard is an array

So, what you need to do is concatinate all the hard and very_hard arrays into a single strings and then do .includes(). It will work!