I want to use the components i made multiple times while rendering dynamic content but when i try to render them they just stack up on themselves in the same position whenever i render the component, multiple times, i dont even see the sliders and the >title stacks up on eachother

import React from "react";
import styled from "styled-components";
import ellipse from "../img/ellipse.png";
import Range from "./Range";

function RangeComp() {
  const titlesArr = [
    "Cybersecurity",
    "Developer",
    "DevOps",
    "Designer",
    "Project Manager",
    "Product Manager",
    "Marketer",
    "Writer",
  ];
  console.log(titlesArr);
  return (
    <Container>
      <Circle />
      <Heading>Score your level of interest in these job titles:</Heading>
      <Divs>
        <Div1>
          <Range title={titlesArr[0]} />
          <Range title={titlesArr[1]} />
        </Div1>
        <Div2></Div2>
      </Divs>
    </Container>
  );
}

export default RangeComp;

const Container = styled.div`
  position: absolute;
  width: 980px;
  height: 583px;
  left: 650px;
  top: 220px;
  box-shadow: 0px 4px 29px #f0f3ff;
  border-radius: 35px;
  :hover {
    border: 1px solid black;
  }
`;
const Circle = styled.div`
  position: absolute;
  background-image: url(${ellipse});
  width: 30px;
  height: 30px;
  right: 1.8%;
  top: 2%;
  background-repeat: no-repeat;
  background-size: cover;
`;
const Heading = styled.div`
  position: absolute;
  width: 400px;
  height: 31px;
  font-family: "HelveticaNeueCyr";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 155.02%;
  color: #30302e;
  left: 8%;
  top: 10%;
`;
const Divs = styled.div``;
const Div1 = styled.div``;
const Div2 = styled.div``;

Above is where i want to reuse the component but they just stack up on each other

Below is the component i want to reuse

import React, { useState } from "react";
import "./Range.css";
import styled from "styled-components";
import ReactSlider from "react-slider";

function Range(props) {
  const [currentValue, setCurrentValue] = useState(0);
  return (
    <div className="range">
      <ReactSlider
        className="customSlider"
        trackClassName="customSlider-track"
        thumbClassName="customSlider-thumb"
        marks={1}
        min={0}
        max={10}
        defaultValue={0}
        value={currentValue}
        onChange={(value) => setCurrentValue(value)}
      />
      <h4>{props.title}</h4>
      <h1 className="range-value">{currentValue}/10</h1>
    </div>
  );
}

export default Range;

CodePudding user response：

What's inside your Range.css?

If the position is:

position: absolute;

Then your components will always stack on top of each other because they all have the same style.

You might need to set the position to:

position: relative;

So that the components will position themselves relative to each other.