Hide and Show Functionality with React JS
1 min readJun 25, 2021
<script type="text/babel">const rootHandle=document.getElementById('root')const url='https://jsonplaceholder.typicode.com/photos'const { useState,useEffect }=Reactconst ListData=(props)=>{const [status,setStatus]=useState(true)const {id,body}=propsconst handleShowHide=()=>{setStatus(!status)}return(<div>{status &&<h3>{body}</h3> }<button onClick={()=>handleShowHide()}>{status ?'Hide' :'Show' } </button></div>)}const App=()=>{const text=[{id:1,body:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, omnis voluptate! Tempora, iusto eaque laudantium architecto animi ipsum rerum natus cum labore, quibusdam voluptatibus voluptas odio reiciendis error autem officiis?'},{id:2,body:'ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, omnis voluptate! Tempora, iusto eaque laudantium architecto animi ipsum rerum natus cum labore, quibusdam voluptatibus voluptas odio reiciendis error autem officiis'},{id:3,body:'ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, omnis voluptate! Tempora, iusto eaque laudantium architecto animi ipsum rerum natus cum labore, quibusdam voluptatibus voluptas odio reiciendis error autem officiis'},{id:4,body:'ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, omnis voluptate! Tempora, iusto eaque laudantium architecto animi ipsum rerum natus cum labore, quibusdam voluptatibus voluptas odio reiciendis error autem officiis'}]return (<div><h1>Hide and show Functinality</h1>{text.map((ele)=>{return <ListData key={ele.id} {...ele}/>})}</div>)}
ReactDOM.render(<App/>,rootHandle)
