Convert URL Input to Image

Question

This React app takes Text inputs (AddMovie.js) and displays them on another page (MovieList.js).

Input one: Movie name & Input two: Price

Getting strings to display was fairly straight forward, but now I want to take in an Image URL in a third text input and display the image along with the name and price.

I'm new to React and I'm not quite sure where to modify. Any help would be massively appreciated.

Code for AddMovie. I'm not sure if everything needs to be handled under updateImage()?

const AddMovie = () => {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [image, setImage] = useState('');

  const [movies, setMovies] = useContext(MovieContext);

  const updateName = (e) => {
    setName(e.target.value);
  };

  const updatePrice = (e) => {
    setPrice(e.target.value);
  };

  const updateImage = (e) => {
    setImage(e.target.value);
  };

  const addMovie = (e) => {
    e.preventDefault();
    setMovies((prevMovies) => [
      ...prevMovies,
      { name: name, price: price, image: image },
    ]);
  };

  return (
    <form onSubmit={addMovie}>
      Enter Product Title
      <br />
      <input type='text' name={name} onChange={updateName} />
      <br />
      Enter Product Price
      <br />
      <input type='text' price={price} onChange={updatePrice} />
      <br />
      Enter Image Address
      <br />
      <input id='image' type='text' image={image} onChange={updateImage} />
      <br />
      <br />
      <button>Submit</button>
    </form>
  );
};

Each individual Movie item. Not sure if {image} is correct.

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <image>{image}</image>
    </div>
  );
};

export default Movie;

This is for the List of movies displaying after they are added.

const MovieList = () => {

  const [movie, setMovie] = useContext(MovieContext);

  return (
    <div>
      {movie.map((movie) => (
        <Movie name={movie.name} price={movie.price} image={movie.image} />
      ))}
    </div>
  );
};

export default MovieList;

Perhaps you're looking for the <img> element.

cbr
– cbr

2020-05-27 19:05:42 +00:00
Commented May 27, 2020 at 19:05 — cbr
– cbr, Commented May 27, 2020 at 19:05

ehab · Accepted Answer · 2020-05-27 19:45:36Z

1

image is not a native html element, and so you should modify your Movie component to


const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} />
    </div>
  );
};

export default Movie;

edited May 27, 2020 at 19:45

answered May 27, 2020 at 19:30

ehab

8,1741 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akainoto Over a year ago

Perfect. Thank you!

ehab Over a year ago

@Akainoto if it worked for u, then accepting it as the correct answer will help others find it easier

Alexandre LEROY · Accepted Answer · 2020-05-27 19:31:16Z

0

Assuming movie.image contains an URL

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name}>
    </div>
  );
};

export default Movie;

That must do the job ;)

answered May 27, 2020 at 19:31

Alexandre LEROY

2,3401 gold badge10 silver badges17 bronze badges

Comments

Sandy · Accepted Answer · 2020-05-27 19:32:49Z

0

Below should work for you. As a suggestion, I would suggest you to rename image as imageUrl.

const Movie = ({ name, price, image }) => {
  return (
    <div>
      <h2>{name}</h2>
      <h4>{price}</h4>
      <img src={image} alt={name} />
    </div>
  );
};

answered May 27, 2020 at 19:32

Sandy

11.7k27 gold badges84 silver badges130 bronze badges

Collectives™ on Stack Overflow

Convert URL Input to Image

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related