CODEWITHSUNDEEP
javascriptreactjsstatereact-props
Nitesh Tiwari
Nitesh Tiwari

Reputation: 41

How to access values of state in other function

How can I use the value of state x in handleClick function to show an alert of input value in state x using Function component?

import React, { useState } from "react";
import "./App.css";

function About() {
  const [state, setState] = useState({
    x: "",
    output: [],
  });
  //for onChange Event
  const handleChnage = (e) => {
    setState({ ...state, [state.x]: e.target.value });
    console.log(e.target.value);
  };
  //for onClick Event
  const handleClick = () => {
    alert(state.x);
  };

  return (
    <>
      <h1>This is about about </h1>
      <input
        placeholder="Enter a number"
        value={setState.x}
        onChange={handleChnage}
      />
      <button onClick={handleClick}>get Table</button>
    </>
  );
}

export default About;

Upvotes: 2

Views: 351

Answers (2)

I am L
I am L

Reputation: 4632

It should be x instead of state.x

const handleChnage = (e) => {
  setState({ ...state, x: e.target.value })
}

and the value should be state.x here instead of setState.x:

<input
  placeholder="Enter a number"
  value={state.x}
  onChange={handleChnage}
/>

Remember on hooks, the first parameter is the value, the second parameter is the setter function.

Upvotes: 4

Amila Senadheera
Amila Senadheera

Reputation: 13245

Two issues should be fixed:

  1. You do not need the computed value [state.x], it should be just x.
setState({ ...state, x: e.target.value });
  1. The value for the input should be state.x not setState.x
      <input
        placeholder="Enter a number"
        value={state.x}
        onChange={handleChnage}
      />


function About() {
  const [state, setState] = React.useState({
    x: "",
    output: []
  });
  //for onChange Event
  const handleChnage = (e) => {
    setState({ ...state, x: e.target.value });
    console.log(e.target.value);
  };
  //for onClick Event
  const handleClick = () => {
    alert(state.x);
  };

  return (
    <React.Fragment>
      <h1>This is about about </h1>
      <input
        placeholder="Enter a number"
        value={state.x}
        onChange={handleChnage}
      />
      <button onClick={handleClick}>get Table</button>
    </React.Fragment>
  );
}

ReactDOM.render(<About />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Upvotes: 2

Related Questions