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.
Source: stackoverflow.com
Related Query
- Typescript error showing up when update method for state element by using React useState
- React - update state only for the clicked element
- React: Update state for a particular element
- onChange event for React child component to update state
- React - State Update value only of Particular key
- React Hooks State update one step behind. For this reason my changes are not working correctly
- Waiting for react state to update in function component
- How to update state for JSX element exist in state?
- react hook for multiple component state didn't update
- Waiting for React component state to update before testing with Jest
- update react state for a single user details page
- how do i update state in react for updating the value of an object inside an array using array.map function
- update state for only one item in react
- React state update only updates one element
- React - update state on props changed - input element
- I am using useReducer hook to for making the custom react hook but below in my code i cannot update state which im receiving from the dispatcher funnc
- Update a state variable only on loading the page for the first time in react js
- How to update react state with dropdown menu selection? I am using semantic UI for the dropdown
- In Reactjs,is it possible to update the state of a component only for those items that satisfy a particular condition
- How to Update JSON Object's state for onChange event in REACT JS?
- How to update state for device width using Hooks in react
- How to update an object element in array with specific index, React State
- in React How to Update the State of an element in a mapped array of elements?
- Update the state of an object element in React
- Can't perform a React state update on an unmounted component for setInterval
- Can't perform a React state update on an unmounted component when using custom hook for fetching data
- Just update the state of one element on the list in React
- React: On onBlur event for specific element, capture other element state update by onClick event
- Can't perform React state update on an unmounted component for useCallback
- React onSubmit wait for async IIFE inside the function to update state with hooks
More Query from same tag
- I can't get the data from my server using reactjs and express
- Getting error when I try iterate through an immutable.js
- React app - How to show the price when the button is clicked?
- How to select a group of children from the parent?
- Disconnect webcam on click after accessing it through .getUserMedia in ReactJS
- React Reflux: Correct way to initiate stores and update dependent components
- How can I filter array of state in react?
- Warning Unkown Prop
- How to test child props without triggering "Do not access .props of a DOM node" (0.14)?
- Error with calling graphQl mutation from react app
- In Jest test it says withRouter () is not a function
- Cannot read property 'email' of null with Firebase cloud storage and authentication. saving a picture as the username
- React doesn't render in Electron App
- How can I put the action of CardHeader right beside the title?
- React router: How to handle trailing / in match.url when building Links?
- Getting JSON info to Material-UI dialoge
- Meteor/React: Redirect outside of component as callback of AccountsTemplates.logout()
- How can I check when all of the required fields of a form has been filled out?
- How do you set multiple values in an objects state with useReducer?
- Javascript - React destructuring array
- Update nested state in reducer
- Redux + Typescript + funtional component: imported component requires props that come from Redux
- State Variable assigned to props data model undefined inside setState React
- Security holes or vulnerabilities in ReactJS?
- HTML5 video flashes and makes additional requests for the same video
- IndexedDB syncronism issue when creating parallel stores in the same db
- How to implement a dynamic form with controlled components in ReactJS?
- Jest referenceError 'is not defined'
- React Protected Routes API calls
- Element type error in a near empty react app