Cannot read property 'value' of null Error in first render

Question

I try get a value of my option/select for use it in states in future, but when I try get element by ID, i got error "Cannot read property 'value' of null"

import React from "react";

function Inputs() {
  const Period = document.getElementById("Period");

  console.log(Period);

  const inputHandler = (inputName) => {
    console.log(inputName.value);
  };

  return (
    <div>
      <label>Period:</label>
      <select id="Period" onChange={() => inputHandler(Period)}>
        <option>Last 12 month</option>
        <option>Last 6 month</option>
        <option>Last month</option>
      </select>
    </div>
  );
}

export default Inputs;

Link to the SandBox

Try to do it in useEffect, because at initial the select tag not initialized — Zuhair Naqi
– Zuhair Naqi, Commented Nov 30, 2020 at 19:38
The reason why Period is null is because when the component is mounted, there is no DOM painted already so the selector is not able to find an non-exist element Checkout this solution codesandbox.io/s/hungry-snow-4ylgb?file=/src/App.js — Manuel Pamplona
– Manuel Pamplona, Commented Nov 30, 2020 at 19:52

Grazielle Carvalho · Accepted Answer · 2020-11-30 19:45:06Z

1

Check the solution bellow:

import React from "react";

function RechartsInputs() {
  const Period = document.getElementById("Period");

  console.log(Period);

  const inputHandler = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <label>Period:</label>
      <select id="Period" onChange={e => inputHandler(e)}>
        <option>Last 12 month</option>
        <option>Last 9 month</option>
        <option>Last 6 month</option>
        <option>Last 3 month</option>
        <option>Last month</option>
      </select>
    </div>
  );
}

export default RechartsInputs;

hope it helps ;D

answered Nov 30, 2020 at 19:45

Grazielle Carvalho

4631 gold badge4 silver badges12 bronze badges

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

Comments

topdev87 · Accepted Answer · 2020-11-30 19:40:54Z

1

Your logic is wrong. Follow with this. Use useEffect and useState.

import React, { useEffect, useState } from "react";

function RechartsInputs() {
  const [val, setVal] = useState(null);

  useEffect(() => {
    console.log(val);
  }, [val]);

  const inputHandler = (event) => {
    setVal(event.target.value);
  };

  return (
    <div>
      <label>Period:</label>
      <select id="Period" onChange={inputHandler}>
        <option>Last 12 month</option>
        <option>Last 9 month</option>
        <option>Last 6 month</option>
        <option>Last 3 month</option>
        <option>Last month</option>
      </select>
    </div>
  );
}

export default RechartsInputs;

answered Nov 30, 2020 at 19:40

topdev87

8,7913 gold badges11 silver badges33 bronze badges

1 Comment

Miltosh Over a year ago

Your solution are good and work, but I'm should not use States at this component, because i'm pass this values on neighboring component through the parent component

user1 · Accepted Answer · 2020-11-30 19:48:42Z

1

It's not recommended to use document.getElementById with React this way.

You need to understand that you are using jsx which is a templating engine that reads all the tags that your component is returning and compiles it to JavaScript in order to generate the HTML. So what you are doing is trying to query the element before it's rendered and thats why you get null.

You could use a lifecycle callback like componentDidMount or a hook like useEffect in order to get notified when the HTML was rendered and then use document.getElementById but it's not recommended to access elements like this.

In order to get a reference to the element you can use refs even though it's better to create a handler for the onChange event and get the value from the event target.

edited Nov 30, 2020 at 19:48

answered Nov 30, 2020 at 19:41

user1

1,1451 gold badge10 silver badges18 bronze badges

Comments

Maheer Ali · Accepted Answer · 2020-11-30 19:39:57Z

0

You are trying to access the input before the render at that time it will be obviously null

Use the event.target to access the input

import React from "react";

function Inputs() {

  const inputHandler = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <label>Period:</label>
      <select id="Period" onChange={(e) => inputHandler(e)}>
        <option>Last 12 month</option>
        <option>Last 6 month</option>
        <option>Last month</option>
      </select>
    </div>
  );
}

export default Inputs;

answered Nov 30, 2020 at 19:39

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

2 Comments

Miltosh Over a year ago

Thank you, but your try run your code ? It doesn't work

Maheer Ali Over a year ago

@Miltosh t h I don't have system to run react atm. Does any other code work?

Collectives™ on Stack Overflow

Cannot read property 'value' of null Error in first render

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related