score:0

first of all, i have added a property showtick in my generated object in componentdidmount, showtick:false

    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = math.floor(math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledarray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" ")),
            showtick:false
          },
          correctanswer: obj.words
        };
      });

    this.setstate({
      shuffledarray
    });
  }

then in checklines function i assigned showtick to true

checklines(str, obj) {
    obj.map(item => {
        //console.log(item.correctanswer)
        if (item.correctanswer === str.trim()) {

            //console.log('correct')
            this.setstate({
                score:this.state.score + 80,
                inputanswer:''
            })
            item.parts.showtick = true
        }
        return true
    })
  }

then in render part i showed it.

render() {
    //console.log(this.state.shuffledarray);
    const shuffles =
      this.state.shuffledarray &&
      this.state.shuffledarray.map(item => (

        <li key={item.id}>
          {item.parts.speaker}
          <input onchange={this.writesomething} />
          {item.parts.showtick && <mddoneall style={{color:'blue'}}/>}
          <button
              color="primary"
              onclick={() => {
                this.checklines(this.state.inputanswer, this.state.shuffledarray);
              }}
              size="small"
            >
              check
            </button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }

score:2

this.state.showtick is universal in your case. once set true, it is used for every element. you need to change that to an object and use the item.id to show the tick.

first:

 this.state = {
      shuffledarray: [],
      inputanswer: "",
      score:0,
      showtick:{}
    };
checklines(itemid, str, obj) {
    obj.map(item => {
        //console.log(item.correctanswer)
        if (item.correctanswer === str.trim()) {

            //console.log('correct')
            this.setstate({
                score:this.state.score + 80,
                inputanswer:'',
                showtick:{...this.state.showtick, itemid : true}
            })
        }
        return true
    })
  }
<li key={item.id}>
          <input onchange={this.writesomething} />
          {this.state.showtick[item.id] && <mddoneall style={{color:'blue'}}/>}
          <button
              color="primary"
              onclick={() => {
                this.checklines(item.id, this.state.inputanswer, this.state.shuffledarray);
              }}
              size="small"
            >
              check
            </button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>

let me know if it works. it's hard to test it without the whole code.


Related Query

More Query from same tag