Hi, I am new to react and creating an organizational structure. Following issue, i am facing
1) The parent(root) should be in the center at the top of the page
2) After clicking the parent, the child element should be displayed below its parent.
APP.JS component:
import data from './OrgDetail.json'; import Chart from './Components/Chart'; function App() { const root = { child: data }; return ( <div className="App"> <Chart item={root} expanded /> </div> ); } export default App;
Chart Component:
import React, { useState } from 'react'; export default function Chart({ item, expanded, onExpandChange }) { const center = { backgroundColor: 'rgb(246,246,246)', fontSize: '12px', width: '250px', height: '85px', border: '1px solid grey', borderRadius: '25px', display: 'flex', justifyContent: 'center', position:'absoulte', margin: '0 auto', marginBottom: '40px', top:'60px' } const linkstyle = { left: '220px', position: 'absolute', textDecoration: 'none', color: 'darkgrey', } const imagestyle = { border: '2px solid grey', borderRadius: '50%', height: '80px', width: '80px', position: 'absolute', top: '-50px', } const namestyle = { position: 'absolute', top: '30px' } const designstyle = { position: 'absolute', top: '45px' } const buttonstyle = { position: 'absolute', top: '70px', borderColor: 'grey' } const [expandedChild, setExpandedChild] = useState(); return ( <> {item.name && ( <div key={item.key} className="container" style={center}> <img src={item.image} style={imagestyle} alt={item.name} /> <span style={linkstyle} title={item.about}><b>....</b></span> <span style={namestyle}><b>{item.name}</b></span><br></br> <p style={designstyle}>{item.designation}</p> {onExpandChange && item.child?.length && (<button style={buttonstyle} onClick={onExpandChange} > {item.child?.length} {expanded ? '?' : '?'} </button>)} </div> )} {expanded && ( <div className="children" style={{position:'relative', top: '160px', display: 'flex', gap:'10px'}}> {item.child?.map((item, idx) => ( <Chart key={idx} item={item} onExpandChange={() => { setExpandedChild(expandedChild === idx ? null : idx); }} expanded={expandedChild === idx} /> ))} </div> )} </> ) }
Json file:
[ { "key": "p1", "name": "Chetan Lal", "designation": "Managing Director", "image": "/images/Chetan-Lal-edit.jpg", "about": "This is just test", "child": [ { "key": "c1", "name": "Shagufta Merchant", "designation": "VP-Digital Operations & HR", "image": "/Images/Shagufta-Merchant-edit - Copy.jpg", "about": "This is just test2", "child": [ { "key": "gc1", "name": "Manjiri Nadkarni", "designation": "Manager - NA Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2", "child": [ { "key": "ggc1", "name": "Anurag Bhagrav", "designation": "Team Leader - Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2" }, { "key": "ggc2", "name": "Janhavi Chaudhari", "designation": "Team Leader - Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2" }, { "key": "ggc3", "name": "Anurag Shetty", "designation": "Team Leader - Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2" } ] }, { "key": "gc2", "name": "Shailendra More", "designation": "Manager - NA Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2", "child": [ { "key": "ggc1", "name": "AjayKumar Padhy", "designation": "Team Leader - SEO & Auto", "image": "/Images/placeholder.jpg", "about": "This is just test2" }, { "key": "ggc2", "name": "Jignesh Shah", "designation": "Asist. Manager", "image": "/Images/placeholder.jpg", "about": "This is just test2" } ] }, { "key": "gc3", "name": "Vaishakhi Phadke", "designation": "Asst. Manager - NA Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test2", "child": [ { "key": "ggc1", "name": "Hassel Rathod", "designation": "Team Manger - National", "image": "/Images/placeholder.jpg", "about": "This is just test2" } ] }, { "key": "gc4", "name": "Mitesh More", "designation": "Training Team Manager", "image": "/Images/placeholder.jpg", "about": "This is just test2" }, { "key": "gc5", "name": "Shrutika Jadhav", "designation": "Manager - HR", "image": "/Images/placeholder.jpg", "about": "This is just test2" }, { "key": "gc6", "name": "Tejinder Ossan", "designation": "Manager - Facility", "image": "/Images/placeholder.jpg", "about": "This is just test2" } ] }, { "key": "c2", "name": "Bhavesh Chauhan", "designation": "VP-Marketing Operations & IT", "image": "/Images/Bhavesh-Chauhan-edit.jpg", "about": "This is just test3", "child": [ { "key": "gc7", "name": "Justie Lewis", "designation": "Manager - Media Ops", "image": "/Images/placeholder.jpg", "about": "This is just test3" } ] }, { "key": "c3", "name": "Sanket Naik", "designation": "VP-Marketing Operations & Graphics", "image": "/Images/Sanket-Naik-edit.jpg", "about": "This is just test4" }, { "key": "c4", "name": "Ankanksha Narula", "designation": "Sr. Manager - Finance", "image": "/Images/Akansha-Narula-edit.jpg", "about": "This is just test5" }, { "key": "c5", "name": "Diju Kurup", "designation": "Manager - Marketing Operations", "image": "/Images/Diju-Kurup-edit.jpg", "about": "This is just test6" }, { "key": "c6", "name": "Arya Andrade", "designation": "Manager - Facility", "image": "/Images/Arya-Andrade-edit.jpg", "about": "This is just test7" } ] } ]