How to return html element from object

Question

I've created function which returns me drawed photo. I'm trying to assign it as an img url, but instead of html element it returns me an object. How can I refer to an html element instead of to object?

This is function that returns me an image:

function workoutImage() {
  const images = [
    {
      img1: "./images/workout-image1.jpg",
    },
    {
      img2: "./images/workout-image2.jpg",
    },
    {
      img3: "./images/workout-image3.jpg",
    },
  ];

  const imageIndex = Math.floor(Math.random() * images.length);
  let returnImage = images[imageIndex];

  return returnImage;
}

export default workoutImage;

and here's component where I'm trying to display it:

function WorkoutsDiary() {

  let workoutImage = workoutImageDraw();

  return (
    <Container>
      <Content>
        {showWorkouts &&
          showWorkouts.map((workout, key) => (
            <Image key={key}>
              <Link to={`/exercise/` + workout.id}>
                <img src={workoutImage} alt="" />
              </Link>
            </Image>
          ))}
      </Content>
    </Container>
  );
}

when I do a console log, it looks like this:

David · Accepted Answer · 2021-07-28 13:40:15Z

2

This:

return returnImage;

is returning an instance of an object. For example, this:

{
  img1: "./images/workout-image1.jpg",
}

If you just want it to return the string property on that object, return that property:

return returnImage.img1;

Alternatively, if you want to return the whole object then just use its string property in the attribute value:

<img src={workoutImage.img1} alt="" />

Edit: I just noticed that your objects all have different property names so you'd need to determine which one to use. Instead, I would recommend having a single common object structure. Or forget the objects entirely and just use an array of strings:

const images = [
  "./images/workout-image1.jpg",
  "./images/workout-image2.jpg",
  "./images/workout-image3.jpg",
];

answered Jul 28, 2021 at 13:40

David

221k42 gold badges247 silver badges338 bronze badges

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

Comments

dw_ · Accepted Answer · 2021-07-28 13:40:59Z

2

You have an array of objects, and you have different keys in each of the objects.

It should be array of strings.

const images = [
  "./images/workout-image1.jpg",
  "./images/workout-image2.jpg",
  "./images/workout-image3.jpg"
];

answered Jul 28, 2021 at 13:40

dw_

1,8471 gold badge11 silver badges16 bronze badges

Comments

Giovanni Esposito · Accepted Answer · 2021-07-28 13:43:49Z

1

The easiest thing to do is modify your workoutImage in this way:

function workoutImage() {
  const images = [
    "./images/workout-image1.jpg",
    "./images/workout-image2.jpg",
    "./images/workout-image3.jpg",
  ];

  const imageIndex = Math.floor(Math.random() * images.length);
  let returnImage = images[imageIndex];

  return returnImage;
}

export default workoutImage;

Now you should see your image in img.

answered Jul 28, 2021 at 13:43

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Comments

Kavitha K T · Accepted Answer · 2021-07-28 13:43:13Z

0

import img from workoutImage

and use image like this

 <img src={img} alt="" />

answered Jul 28, 2021 at 13:43

Kavitha K T

1198 bronze badges

Comments

Abrah_dago_313 · Accepted Answer · 2021-07-28 13:44:44Z

0

Change this line :

let returnImage = images[imageIndex];

To :

    let returnImage = '';
Object.keys(images[imageIndex]).map((key) => {
  returnImage = images[imageIndex][key]
});

answered Jul 28, 2021 at 13:44

Abrah_dago_313

2101 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to return html element from object

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related