I'm new to React. I'm trying to add text in an image and it's not working . Can you guys help me with this

<div className='row'>
  <h2>{props.title}</h2>

  <div className="posters">
    {
      movies.map((obj) =>
        <img onClick={() => handleMovie(obj.id)} className={props.isSmall ? "samllPoster" : "poster"} src={`${imageUrl   obj.poster_path}`} />

      )
    }

    //text

    <p className='poster-wraper'>{props.title}</p>
    <div className='poster-wraper'>
      {
        movies.map(obj2 => {
          <h2>{obj2 ? obj2.overview : "null"}</h2>
          console.log(obj2.overview)
        })
      }

    </div>
</div>

CodePudding user response：

Not sure exactly how you expect it to look, but I hope this example helps you a bit. You can see a working version of it in this sandbox: https://codesandbox.io/s/affectionate-frost-q4nvnl?file=/src/App.js:0-1096

import React from "react";

const ImageWithText = (props) => {
  const imageUrl = "https://rickandmortyapi.com/api/";

  const movies = [
    {
      id: 1,
      poster_path: "character/avatar/461.jpeg",
      isSmall: true,
      alt: "example",
      overview: "Example image 1"
    },
    {
      id: 2,
      poster_path: "character/avatar/662.jpeg",
      isSmall: true,
      alt: "example",
      overview: "Example image 2"
    }
  ];

  const handleMovie = (id) => console.log(id);

  return (
    <div className="row">
      <h2>{props.title}</h2>
      {movies.map((obj) => (
        <div className="posters">
          <img
            alt={obj.alt}
            onClick={() => handleMovie(obj.id)}
            className={props.isSmall ? "samllPoster" : "poster"}
            src={`${imageUrl   obj.poster_path}`}
          />
          <div className="poster-wraper">
            <h2>{obj ? obj.overview : "null"}</h2>
          </div>
        </div>
      ))}
    </div>
  );
};

const App = () => {
  return <ImageWithText title="Show images with text" />;
};

export default App;

CodePudding user response：

If you want text over image, check this link: https://www.w3schools.com/HOWTO/howto_css_image_text.asp

and this: https://www.w3schools.com/howto/howto_css_image_text_blocks.asp

There are examples that I think you want.