Search code examples
cssreactjsrendering

Footer Component Breaking Background

I want to have a black background colour for my footer component. The problem I am now having is that the background colour is now going on the "li tag" text only rather than for the whole footer.

Below is my Code:


function Footer(props) {
  console.log(props);
  return props.array.map((elem) => {
    return (
      <footer style={{backgroundColor:"black",color:"blue"}}>
          <ul >
        <li style={{marginLeft:"5%"}}>{elem}</li>
    </ul>
      </footer>
    );
  });
}

I have also tried to give the "ul tag" the background colour=black but it doesn't result in any change.

Solution

  • Try this

     return (
    <footer style={{ backgroundColor: "black", color: "blue" }}>
      <ul>
        {props?.array?.map((elem, i) => (
          <li key={i} style={{ marginLeft: "5%" }}>{elem}</li>
        ))}
      </ul>
    </footer>
  );

    You need to iterate on li tag not on entire footer if you need background color on root level.