Question 297737 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can we apply tailwind classes to every react component when using map() method?

I was creating a React Movie app, and then I noticed that the tailwind class’s mx-auto was not working properly for every item of the array. The mx-auto was only working for the first element.


const MoviesList = () => {
    return(
        <div className='MoviesList space-x-0 space-y-10 bg-red-400  my-10 flex flex-col mx-auto w-11/12 md:space-x-6  md:space-y-0'>
            {title.map((data,index)=> <MovieCard key={index} movieTitle={data.name}/>)}
        </div>
    );
}



export default MoviesList;


const MovieCard = ({movieTitle}) => {

        const [moviePoster,setMoviePoster] = useState('');

        const getMoviePoster = async () => {            
            const response = await fetch(`http://www.omdbapi.com/?apikey=c4bceb23&t=${movieTitle}`);
            const data = await response.json();
            setMoviePoster(data.Poster);
        }
        getMoviePoster();
    return(
        <div className= " rounded-xl shadow-xl w-64 mx-auto my-6 overflow-hidden">
            <div className='Movieposter w-full'>
                <img src={moviePoster}/>
            </div>
            <div className='Moviedetail w-full bg-blue-200 p-3'>{movieTitle}</div>
        </div>
    );
}

export default MovieCard;

So In the MovieCard component, I have given some tailwind classes but on rendering only the first item of array is able to get the class (mx-auto) and rest were not able to get the class.

Please help me to resolve this issue.

Tags:

2

Answers


  1. 0

    Try add ‘container’ class with ‘mx-auto’

    Login or Signup to reply.
  2. 0

    The classes space-x-0 and md:space-x-6 on the parent element apply margin-left and margin-right to the child elements, and the rules have higher specificity than mx-auto‘s rule. Since the space-x-* applies to (effectively) all but the first element, this is why mx-auto works only on the first one.

    You could consider removing the space-x-* classes on the parent – they don’t seem to be functionally doing anything significant since the layout of child elements are vertical in nature:

    const { useState } = React;

const MovieCard = ({ movieTitle }) => {
  const [moviePoster, setMoviePoster] = useState("");

  const getMoviePoster = () => fetch(`http://www.omdbapi.com/?apikey=c4bceb23&t=${movieTitle}`)
    .then((response) => response.json())
    .then((data) => {
      setMoviePoster(data.Poster);
    });
  getMoviePoster();
  return (
    <div className=" rounded-xl shadow-xl w-64 mx-auto my-6 overflow-hidden">
      <div className="Movieposter w-full">
        <img src={moviePoster} />
      </div>
      <div className="Moviedetail w-full bg-blue-200 p-3">{movieTitle}</div>
    </div>
  );
};

const MoviesList = () => {
  const title = [
    { name: 'The Shawshank Redemption' },
    { name: 'The Godfather' },
    { name: 'The Dark Knight' },
  ];

  return (
    <div className="MoviesList space-y-10 bg-red-400 my-10 flex flex-col mx-auto w-11/12 md:space-y-0">
      {title.map((data, index) => (
        <MovieCard key={index} movieTitle={data.name} />
      ))}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("app")).render(<MoviesList />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div id="app"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search