score:1
Accepted answer
it's because you don't store the array in state. if you use usestate
for array
too, it will work correctly:
const {usestate} = react;
function blockeditor() {
let [block1content, setblock1content] = usestate('1');
let [block2content, setblock2content] = usestate('2');
let [block1order, setblock1order] = usestate(0);
let [block2order, setblock2order] = usestate(1);
let [array, setarray] = usestate([block1content, block2content]);
function blockswap() {
const copy = [...array];
[copy[0], copy[1]] = [copy[1], copy[0]];
setarray(copy);
setblock1order(copy.indexof(block1content));
setblock2order(copy.indexof(block2content));
}
function log() {
console.log('array: ', array);
console.log('blockorder: ', block1order, block2order);
}
return (
<div>
<button onclick={blockswap}>swap blocks</button>
<button onclick={log}>console log results</button>
</div>
);
}
reactdom.render(<blockeditor />, document.getelementbyid('react'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
it would also work without creating a copy of the array
:
function blockswap() {
[array[0], array[1]] = [array[1], array[0]];
setarray(array);
setblock1order(array.indexof(block1content));
setblock2order(array.indexof(block2content));
}
Source: stackoverflow.com
Related Query
- How do I swap array elements correctly in React.JS?
- How do I test an array of JSX elements in jest with react renderer
- How to push elements to react hooks state array
- React - How to correctly render the progress of array of promise?
- How can I show certain elements from an array based on a React State?
- How to remove elements from array using redux, immer, react
- how to find mismatch elements between two nested array in react
- React 16.8 hooks => how to properly inject an array of elements into the DOM
- How to pre type array of React Elements in typescript
- React filter and then swap array elements
- How can I manually sort (move) array elements around, in react and/or javascript?
- How to add 4 elements (objects) in array to localstorage, react
- How to update an array in React using Hooks. Not adding new elements just looping through a list
- how to create multiple elements in react where there is no array is available?
- How to enable/disable elements from an array in React JS?
- how to chart the last 90 elements of an array in react
- How to correctly initialize a state array React JS
- How to correctly display an array with objects (from another file) on react page?
- How to access array elements in react js?
- how to add elements of an array in react
- How to define an array with conditional elements in react
- how to append react div element from an array with a child element ? and how to give to mapped parent elements unique "key" props
- How can I correctly render elements from an array in Reactjs?
- How to correctly use a specific array value in react
- How to create React elements in an array (with props) and then render them by simply mapping over that array?
- How to Add and delete elements to array with one unique function (handleClick) in react js
- React how to render array elements once?
- How to render elements in an array in different grid columns React
- How to compare array and render elements in react
- How to correctly set state value of React component to an array of JSON objects?
More Query from same tag
- Redirect to an html page if the route isn't specified
- ReactJs: refs is not defined (no-undef)
- Children with the same key: Object.assign vs _.merge
- How to use react-swipe as a component?
- How to make first radio button selected by default in Material UI?
- ReactJS: Is it safe to use a conditional in the event of an undefined props?
- Passing function parameter from App.js to Other component in React
- how to prevent shows the YUP error message for all form fields when edit the particular field in the form?
- how can i send data to redux correctly?
- Pass data from one component to another using ReactJS
- Material UI Autocomplete default value of empty string
- Hosting Apple verification file with NextJS
- Border color doesn't work in Tailwind CSS
- implementing scroll animations with gatsby and gatsby-plugin-scroll-reveal
- Why am I not getting a re-render, when using map function to list components?
- Navigation with Material-UI Icons
- React router render method with HOC
- Confused between the difference between JSX.Element vs React.Component and when to use them with React-dom-router
- React async data (object) getting corrupted while assigned to state
- How to convert the following properties from CSS to Mui?
- React - Combine data returned two api calls and set state of an array with these values
- Setting state inside event listener which is inside componentDidMount method
- Set props on react class
- How to render a self-destructing paragraph at mouse position in React?
- Why changes in Checkbox's value are not displayed?
- React passing data into another component
- How can I change the fontweight of an item at click method - React
- Function is undefined in a class component react
- Infinitely scrollable <tbody> element?
- Cannot read property 'category' of undefined (Error)