-2

I want to style my image using the box prop. I don't know whether the object is wether it is an empty object or not.

const FaceRecognition = ({ imageUrl, box }) => {
  return (enter image description here
    <div>
      <img id='fa[enter image description here][1]ce' src={imageUrl} width={"500px"} height={"auto"} />
      <div
        className='bounding-box'
        style={{
          top: box.topRow,
          right: box.rightCol,
          bottom: box.bottomCol,
          left: box.leftCol,
        }}
      ></div>
    </div>
  );
};

 displayFaceBox = (box) => {
    this.setState({ box: box });
   
  };

This is the code in my App class where I want to render everything.

calculateFaceLocation = (data) => {
    const clarifaiFace =
      
    const image = document.getElementById("face");
    const width = Number(image.width);
    const height = Number(image.height);
   
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - (clarifaiFace.right - width),
      bottomCol: height - (clarifaiFace.right - height),
    };
  };
  displayFaceBox = (box) => {
    this.setState({ box: box });
    console.log(this.state.box);
  };
Hilary
  • 21
  • 6
  • Your question is not clear? Where do you use this FaceRecognition component? Can you add more explanation. – Dulaj Ariyaratne Oct 20 '22 at 03:44
  • Does this answer your question? [Console.log() after setState() doesn't return the updated state](https://stackoverflow.com/questions/54713510/console-log-after-setstate-doesnt-return-the-updated-state) – boop_the_snoot Oct 20 '22 at 03:45
  • Does this answer your question? [Why is setState in reactjs Async instead of Sync?](https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync) – hgb123 Oct 20 '22 at 03:54
  • Thank you guys for your answers. The styles are still not applying. I added more code – Hilary Oct 20 '22 at 04:20

1 Answers1

0

When you pass an object to a function component as an object, you have to serialize it with JSON.stringify, like this:

displayFaceBox = (box) => {
    this.setState({ box: JSON.stringify(box) });
    console.log(this.state.box);
};

Then parse it inside the function component as below.

const FaceRecognition = ({ imageUrl, box }) => {
     box = JSON.parse(box)
    ...

Hope this helps.

Dennis Quan
  • 149
  • 1
  • 5