useState hook not updating a value

Question

I'm new to react and I don't understand why the title inside the h1 tag gets updated, but the url inside the Image Component doesn't ?

Listing Component

import React, { useState, useEffect, useContext } from 'react';
import Image from './Image';
import Size from '../index';

export default function Listing(props) {
  const [title, setTitle] = useState(props.title);
  const [url, setUrl] = useState(props.url);

  const value = useContext(Size);

  return (
    <div>
      <Image url={url} size={value.size} />

      <h1>{title}</h1>
      <form>
        <input id='URL' type='text' />
        <button
          onClick={e => {
            e.preventDefault();
            setUrl(document.getElementById('URL').value);
            setTitle(document.getElementById('URL').value);
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

My guess so far is that React wont update a child component if a prop changes, but how can I update that manually then ?

Image Component

import React from 'react';

export default class Image extends React.Component {
  //console.log(props.size);
  constructor(props) {
    super(props);
    this.url = props.url;
    this.size = props.size;
  }
  render() {
    return <img src={this.url} style={{ height: this.size + 'px' }} alt='' />;
  }
}```

Don't mix DOM manipulation and React, [use React events to keep the input state in sync](https://stackoverflow.com/a/36683831/1218980). — Emile Bergeron, Dec 10 '19 at 15:20
Please refer to https://reactjs.org/docs/forms.html to handle value from form — antho39, Dec 10 '19 at 15:22
In your `Image` component, use `this.props` in the render function, otherwise, it will never update when the values change. — Emile Bergeron, Dec 10 '19 at 15:24

score 3 · Answer 1 · edited Dec 10 '19 at 15:37

3

You don't need to assign the props value to class variable in the child component. Since you are doing that in the constructor it isn't getting updated.

Change your Image component to directly use the data from props

import React from 'react';

export default class Image extends React.Component {
  //console.log(props.size);
  constructor(props) {
    super(props);
  }
  render() {
    return <img src={this.props.url} style={{ height: this.props.size + 'px' }} alt='' />;
  }
}

edited Dec 10 '19 at 15:37

Emile Bergeron

17,074
5
83
129

answered Dec 10 '19 at 15:29

Shubham Khatri

270,417
55
406
400

4

just missing `this.props` in the `render` function since this is a class component. – Emile Bergeron Dec 10 '19 at 15:30
1

@EmileBergeron Thanks for the edit, I was in a midst of something and didn't verify my answer – Shubham Khatri Dec 10 '19 at 16:22

Chris · Accepted Answer · 2019-12-10T15:38:27.640

There are many "smells" with your code. Here is the short, quick-fix answer:

Change this: src={this.url} to this: src={this.props.url}.

The reason the image never updated is because of this:

constructor(props) {
  super(props);
  this.url = props.url;
  this.size = props.size;
}

You are setting local variables to be the initial prop values. Since you are setting these in your constructor, these lines will ever only be executed when your component is created, but never when new props are sent in. React is still triggering a re-render, since you are sending in new props, but the new value is never used, so the old result stays.

Slightly longer answer:

It's rarely a good idea to mix values read from the DOM directly like you do here:

setUrl(document.getElementById('URL').value);
setTitle(document.getElementById('URL').value);

Instead, have 2 states. One that holds the current value of your input which updates with every keystroke, and another that holds the value that you send down to your Image component.

Maybe something like:

export default function Listing(props) {
  const [title, setTitle] = useState(props.title);
  const [inputUrl, setInputUrl] = useState(props.url);
  const [url, setUrl] = useState(props.url);

  const value = useContext(Size);

  return (
    <div>
      <Image url={url} size={value.size} />

      <h1>{title}</h1>
      <form>
        <input
          value={inputUrl}
          onChange={e => setInputUrl(e.target.value)}
        />
        <button
          type="button"
          onClick={() => {
            setUrl(inputUrl);
            setTitle(inputUrl);
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

Notice also that I removed e.preventDefault() and added type="button" to your button, since the default type is submit, which would probably refresh your page.

This is finally the most complete (and correct) answer here. — Emile Bergeron, Dec 10 '19 at 15:41
Those 'smells'? That's react attempting to polish the javascript turd. ...but the answer is absolutely right! — Midiman, Jan 29 '23 at 20:41

r3dst0rm · Answer 3 · 2019-12-10T15:42:13.973

Your image component does not handle the props correctly. Assigning prop values to class variables won't work as you would expect, as this code gets executed once (because it's inside the constructor).

  constructor(props) {
    super(props);
    // The following causes trouble.
    this.url = props.url;
    this.size = props.size;
  }

You could assign a state in the constructor like the following, but it doesn't solve your issue. You would need to update the state accordingly at some place. There are various lifecycle methods to choose from, a matching one would be: UNSAFE_componentWillReceiveProps but as the name suggests I would not use it anymore.

constructor(props) {
  super(props);
  this.state = {
    url = props.url,
    size = props.size,
  };
}

Basically you can simply solve your issue by passing in the props into your JSX and get rid of the constructor stuff, as you do not need any state calculation based on your input values as these values are a url and size.

import React from 'react';

export default class Image extends React.Component {
  render() {
    return <img src={this.props.url} style={{ height: this.props.size + 'px' }} alt='' />;
  }
}

Setting a state and not updating it later on is the same as setting instance variables. — Emile Bergeron, Dec 10 '19 at 15:35
You're now suggesting a deprecated lifecycle hook. There is now [`getDerivedStateFromProps`](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) or [`componentDidUpdate`](https://reactjs.org/docs/react-component.html#componentdidupdate). — Emile Bergeron, Dec 10 '19 at 15:44

useState hook not updating a value

Listing Component

Image Component

3 Answers3