React: element rendering issue

Sameer Farooqui

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 (
    
 
  
    
  );
}
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 && (
                       
                    
                        
                        ....
                        {item.name}


                        {item.designation}
                        {onExpandChange && item.child?.length && ()}
                    
                )}
            {expanded && (

                    {item.child?.map((item, idx) => (
                         {
                                setExpandedChild(expandedChild === idx ? null : idx);
                            }}
                            expanded={expandedChild === idx}
                        />
                    ))}
                
            )}
        
    )
}

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"
            }
        ]
    }
]

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago
For the image not being visible, make sure that the file path for the image is correct and that the image is properly formatted. You can also try adding an alt attribute to the image tag to ensure accessibility.

To ensure that only the child element is visible after clicking on the parent element, you can modify the code in the Chart component. Specifically, you can update the setExpandedChild function to toggle the index of the child element that is expanded rather than toggling between undefined and 0. For example:
```
const [expandedChild, setExpandedChild] = useState(-1);

...

 setExpandedChild(expandedChild === index ? -1 : index)}
>
```
Then, in the rendering of the child elements, you can conditionally render the child element that corresponds to the index of the expandedChild state variable. For example:
```
{expandedChild === index && (
  
)}
```
hope this helps!
Sameer Farooqui3y ago
Thanks for your help!

I tried with your code but the problem is still persistent.

> The image is now not visible.

> clicking on the button shows all of the data in the same row of the parent. I want only child should be visible

See here:https://giphy.com/gifs/nicyhxiHuaB6Swe8WP
Tuhin Paul3y ago
To center the root element at the top of the page and display child elements below the parent after clicking on it, please modify the necessary changes:

In the App.js component, wrap the Chart component inside a div with a display property set to flex, justifyContent property set to center, and alignItems property set to flex-start to center the root element at the top of the page:
```
function App() {
  const root = {
    child: data
  };
  return (
    
      
    
  );
}
```
In the Chart component, remove the top property from the center style to center it at the top of the page. Also, remove the position: absolute property from the center style as it causes the element to be taken out of the normal document flow:
```
const center = {
  backgroundColor: "rgb(246,246,246)",
  fontSize: "12px",
  width: "250px",
  height: "85px",
  border: "1px solid grey",
  borderRadius: "25px",
  display: "flex",
  justifyContent: "center",
  margin: "0 auto",
  marginBottom: "40px"
};
```
In the Chart component, add a onClick handler to the center div to toggle the expanded state when clicked:
```
 setExpandedChild(expandedChild === undefined ? 0 : undefined)}>
```
In the Chart component, remove the top property from the children style to display child elements below the parent: