Question 22277 in SEO Question posted in
Some basic information to get you started with this can be found here.

having issue with the parent and child elements in react – SEO

my code is shared: https://codesandbox.io/s/crazy-haze-xw2qk3?file=/src/App.js

I am having an issue with the CSS. after clicking any of the child elements, it changes two things:

  1. the newly produces div changes the alignment of its parent div
  2. the newly created div doesn’t fit on the page

Can you place look into this and let me know what should be done? Please note that the provided code should work on all devices.

App.JS file:

 import './style.css';

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;
enter code here

Chart Component:

> import React, { useState } from "react";

export default function Chart({ item, expanded, onExpandChange }) {
  const center = {
    top: "30px",
    backgroundColor: "rgb(246,246,246)",
    fontSize: "12px",
    width: "250px",
    height: "85px",
    border: "1px solid grey",
    borderRadius: "25px",
    margin: "auto",
    display: "flex",
    justifyContent: "center",
    position: "relative",
    marginBottom: "40px"
  };

  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 (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <div className="node">
          {item.name && (
            <div key={item.key} className="container" style={center}>
              <img src={item.image} style={imagestyle} alt={item.name} />
              <a style={linkstyle} href="/" alt="">
                <b>...</b>
              </a>
              <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: "30px",
                display: "flex",
                gap: "8px"
              }}
            >
              {item.child?.map((item, idx) => (
                <Chart
                  key={idx}
                  item={item}
                  onExpandChange={() => {
                    setExpandedChild(expandedChild === idx ? null : idx);
                  }}
                  expanded={expandedChild === idx}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
}

orgDetails.json:

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

]

Tags:

2

Answers


  1. 0

    set your parent’s flex-box align items to start…this will prevent items going down with the dropdown

    <div
   style={{
     display: "flex",
     justifyContent: "center",
     alignItems: "start"
    }}
 >
...
</div>
    Login or Signup to reply.
  2. 0

    The problem arises from the fact that the child nodes are rendered within the parent’s containing div; When you expand a node with more than one child, it makes the parent’s container wider.

    -----------------------------------------------------
| parent                          | parent | parent |
| child  | child  | child | child |        |        |
-----------------------------------------------------

    Two possible fixes:

    1. Make the children div position: absolute, taking it out of the regular layout flow. Here’s a proof of concept fork of your sandbox. I don’t recommend this; position absolute creates brittle layouts.

    2. Render the children outside of the parent div, possibly by moving the rendering responsibility up to the root of the tree.

    -------------------------------------------------------
| parent | parent | parent | parent | parent | parent |
-------------------------------------------------------

-------------------------------------------------------
| child | child  | child | child |                    |
-------------------------------------------------------

-------------------------------------------------------
| child | child  | child | child | child |            |
-------------------------------------------------------

    With either of these approaches your child nodes will no longer be aligned with their parent. If you care about that you’ll have to figure out a way to position them to appear properly anchored

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search