CODEWITHSUNDEEP
cssreactjs
larryfisherman
larryfisherman

Reputation: 35

Displaying component as an li element

I'm trying to create an ul list with components as an li elements. I want components to have their own specific title, which I get from an API. I do a map method on title names array, but when I do it, they're all displaying in one line instead of as an next li element.

This is an exercise component, which is supposted to be an li element:

function Exercise() {
  const { id } = useParams();
  const [details, setDetails] = useState([]);

  useEffect(() => {
    axios
      .get(
        `https://localhost:5001/api/account/${localStorage.userId}/workout/${id}/exercise`
      )
      .then((res) => {
        res.data.map(() => {
          setDetails(res.data);
        });
      });
  }, []);

  return (
    <Container>
      <Content>
        <Title>{details.map((exercise) => exercise.exerciseName)}</Title>
      </Content>
    </Container>
  );
}

const Title = styled.li``;
const Container = styled.div``;
const Content = styled.div``;

and this is WorkoutsDiary, where I want to display all of the components as an li elements:


function WorkoutDetails() {

  return (
    <Container>
      <Background>
        <img src={workoutImageDraw()} alt="" />{" "}
      </Background>
      <Content>
        <ExerciseList>
          <Exercise />
        </ExerciseList>
      </Content>
    </Container>
  );
}

const ExerciseList = styled.ul``;

and it looks like this:

enter image description here

Upvotes: 1

Views: 186

Answers (1)

Drew Reese
Drew Reese

Reputation: 202686

If I understand correctly, you want an unordered list of titles. What you have is a single Title element rendering an array of strings. You'll want to map each string to a Title list item component each rendering the string value.

<Content>
  <ul>
    {details.map((exercise) => (
      <Title key={exercise.exerciseName}>
        {exercise.exerciseName}
      </Title>
    ))}
  </ul>
</Content>

Upvotes: 1

Related Questions