I have read the Refs and the Dom as well as try searching for any question or answer which could relate to my problem (I start with "function" instead of "class").

this is the problem name: 'refs' is not defined (no-undef) (at console.log(refs.okanhzai.value);)

and this is my code:

function ok123(){

      console.log(refs.okanhzai.value);
     }
<div className="panel panel-default">
  <div className="panel-heading">
    <h3 className="panel-title">Categories ok man</h3>
  </div>
  <div className="panel-body">
<div className="form-group">
  
              <label >Search for it</label>

<input type="text" className="form-control" ref="okanhzai"/>

  </div> 

  <button type="submit" className="btn btn-primary" onClick = { ok123() }> Save </button>  

I am trying to print my input value to the console. If my code has any potential bug or error, please help me point it out at least. I will appreciate any further given help. ^_^. Thanks!

I have read the Refs and the Dom as well as try searching for any question or answer which could relate to my problem (I start with "function" instead of "class").

this is the problem name: 'refs' is not defined (no-undef) (at console.log(refs.okanhzai.value);)

and this is my code:

function ok123(){

      console.log(refs.okanhzai.value);
     }
<div className="panel panel-default">
  <div className="panel-heading">
    <h3 className="panel-title">Categories ok man</h3>
  </div>
  <div className="panel-body">
<div className="form-group">
  
              <label >Search for it</label>

<input type="text" className="form-control" ref="okanhzai"/>

  </div> 

  <button type="submit" className="btn btn-primary" onClick = { ok123() }> Save </button>  

I am trying to print my input value to the console. If my code has any potential bug or error, please help me point it out at least. I will appreciate any further given help. ^_^. Thanks!

• javascript
• reactjs
• function

• Where did you define refs? Please check if you have defined refs as a variable or not. – Subhendu Kundu Commented Jul 21, 2020 at 14:34

2 Answers 2

• I think the html should be wrapped as a React Component first. Then you can start using ref attribute.

• In the following code, I wrapped your code a function ponent and use React.createRef() to create a ref and assign to okanhzai. The okanhzai.current.value stores the current input.

const App = () => {
  const okanhzai = React.createRef(null);

  function ok123(){
    console.log(okanhzai.current.value);
  }
  return (
    <div>
      <div className="panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">Categories ok man</h3>
        </div>
        <div className="panel-body">
          <div className="form-group">
            <label >Search for it</label>
            <input type="text" className="form-control" ref={okanhzai}/>
          </div>
        </div>
      </div>
      <button type="submit" className="btn btn-primary" onClick={ok123}> Save </button>
    </div>
  )
}

const container = document.querySelector('#root');
ReactDOM.render(<App />, container);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

import "ref" from firebase/storage

import { ref } from 'firebase/storage';