javascript - how to prevent repetitive shuffle of my array using onClick -

i need fresh eyes me.

i have set of answers in array shuffle on first render.

my problem here, know if clicking on 1 of answer, setstate re-render , consequently re-shuffle array dont want.

you can have @ code below:

export default class extends react.component {      constructor(props) {      super(props)      this.state = {        user: this.props.user,        token: this.props.token,        data: this.props.data,        count: 0,        select: undefined      }      this.changequestion = this.changequestion.bind(this);      this.oncorrect = this.oncorrect.bind(this);      this.onfalse = this.onfalse.bind(this);    }      static async getinitialprops({req, query}) {        const id = query.id;      const authprops = await getauthprops(req, 'country/questions?theory=' + id)      return authprops      }      componentdidmount() {      if (this.state.user === undefined) {        router.push('/login')      }    }      changequestion() {      this.setstate({        count: this.state.count + 1,        select: undefined      })    }      oncorrect() {      this.setstate({        select: true      })    }      onfalse() {      this.setstate({        select: true      })    }        mixanswers() {      const answer = this.props.data.properties.elements        const answers = answer[this.state.count].properties.answers        const answersobj = answers.reduce((ac, el, i) => {          ac.push(          <p key={i} onclick={i === 0            ? this.oncorrect            : this.onfalse} classname={i === 0            ? 'exercices__answers--correct'            : 'exercices__answers--false'}>{el}</p>        )          return ac      }, [])        const answersshuffled = answersobj.sort(() => 0.5 - math.random())        return answersshuffled;    }                    render() {      const {user, token, data} = this.state      const answer = this.props.data.properties.elements      const answers = answer[this.state.count].properties.answers      return (          <div>          {user !== undefined            ? <layout user={this.state.user}>                <div>                  {answer[this.state.count].properties.sources !== undefined                    ? <img src={answer[this.state.count].properties.sources[0].url}/>                    : ''}                  <h1>{answer[this.state.count].properties.question}</h1>                  {this.mixanswers().map((el, i) => <p key={i} onclick={el.props.onclick} classname={this.state.select !== undefined                    ? el.props.classname                    : ''}>{el.props.children}</p>)                  }                <p>{answer[this.state.count].properties.description}</p>                  </div>                <button onclick={this.changequestion}>next question</button>              </layout>            : <h1>loading...</h1>}        </div>      )    }  }

obviously, way using 'this.mixanswers()' method issue. how can prevent re-render re-shuffle array of questions. ps: dont pay attention oncorrect() , onfalse().

you should make sure logic shuffle answers called once, can behavior on componentwillmount or componentdidmount, save them in state of component , in render function instead of

{this.mixanswers().map((el, i) => <p key={i} onclick={el.props.onclick} classname={this.state.select !== undefined               ? el.props.classname               : ''}>{el.props.children}</p>) } 

you use this.state.answers.map()...

wiki