I am developing single component toggle module, Currently I am facing one issue. I have populated data in list but in the center of data are populated as per the requirements.
import { useState } from "react";
const data = [{
"postId": 1,
"id": 1,
"name": "quo vero reiciendis velit similique earum",
"email": "[email protected]",
"body": "est natus enim nihil est dolore omnis voluptatem numquamnet omnis occaecati quod ullam atnvoluptatem error expedita pariaturnnihil sint nostrum voluptatem reiciendis et"
}, {
"postId": 2,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "[email protected]",
"body": "est natus enim nihil est dolore omnis voluptatem numquamnet omnis occaecati quod ullam atnvoluptatem error expedita pariaturnnihil sint nostrum voluptatem reiciendis et"
}, {
"postId": 3,
"id": 3,
"name": "quo vero reiciendis velit similique earum",
"email": "[email protected]",
"body": "est natus enim nihil est dolore omnis voluptatem numquamnet omnis occaecati quod ullam atnvoluptatem error expedita pariaturnnihil sint nostrum voluptatem reiciendis et"
},];
export default function Test() {
const [show, setShow] = useState([]);
console.log('show ==> ', show);
return (
<div>
{data.map((item, i) => (
<div key={i}>
<button onClick={() => {
if (show[i] === i) {
const item = [...show];
const final = item.splice(item.indexOf(i), 1)
setShow(final);
} else {
setShow(prev => [...prev, i]);
}
}}>Toggle</button>
{show[i] === i ? 'SHOW' : 'HIDE'}
<hr />
</div>
))}
</div>
);
}
Could you please support me ?
I have created array list state,
3
Answers
Try this;
could you try this way?
example
let me know if it is missing what you want
Try this code.
Here is the output:
Let me know, if you’ve any doubts!!