0

I am learning javascript, specifically, react.js,I am following a basic redux tutorial, but having problems in understanding the folowing jsx syntax.

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {            
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

On searching what I could only figure out is that ref is a prop for reference (similar to a unique Id) that helps us identifying elements and do stuff with them.

My Question(s): If I understand ref correctly, (please correct me if I am wrong)

(a) In the above example what will be the possible value of the prop ref. In other words, how will the element look when it is actually rendered on the web page?

(b) What does node here refers to? Does the function node => { input = node } return anything?

Ramesh Pareek
  • 1,601
  • 3
  • 30
  • 55

1 Answers1

0

(a) In the above example what will be the possible value of the prop ref. In other words, how will the element look when it is actually rendered on the web page

The value of the property ref will be a callback function with one argument of type HTMLInputElement. It will look like this: <input>

(b) What does node here refers to? Does the function node => { input = node } return anything?

node is an instance of actual DOM element of type HTMLInputElement that corresponds to your <input> tag. This function should not return anything.

More info on refs here.

Amid
  • 21,508
  • 5
  • 57
  • 54
  • so, if `ref` is not rendered, how does it work. what's the use of providing a callback function here? how react uses it ? – Ramesh Pareek Aug 16 '17 at 13:33
  • This is a react way for to interact with child component instances. It allows you to get hold of the in memory reference to the actual rendered DOM element or compoentnt instance. This is done to allow you to imperatively perform some operations on the actual elements. For example if you use bootstrap tooltips you would like in `componentDidMount` to call `$(this.input).tooltip(options)`. The preferred way of getting `this.input` is to assign it using `ref` – Amid Aug 16 '17 at 13:40
  • assign `it`... assign what? I am feeling so awkward, but can you please explain by example .. How will `ref` help me to call the `tooltip()` function on `this.input` ? – Ramesh Pareek Aug 16 '17 at 13:49
  • In ref you will have the code that assign value to `this.input` member: `ref={(c) => this.input = c}` and then later in componentDidMount you can use this member to do what you need to. – Amid Aug 16 '17 at 13:51
  • Ok still finding it difficult to comprehend, can you kindly refer me to some resources, especially, where can I find such example? – Ramesh Pareek Aug 16 '17 at 13:54
  • Sure. Have you looked at the link in post? Here it is again, they give nice examples of `ref` usage: https://facebook.github.io/react/docs/refs-and-the-dom.html – Amid Aug 16 '17 at 13:55
  • yes I did, I am finding problem in understanding how does that `textInput` thing come from? – Ramesh Pareek Aug 16 '17 at 13:56
  • textInput is just a field in CustomTextInput class. You can name it whatever - its your class internal field. This is how you define fields in classes in javascript. – Amid Aug 16 '17 at 13:58
  • also, it seems to me that the function takes an input element as an argument and sets the `textInput` element to this element. Sounds like it replaces the DOM with this element. Clearly this is not the case but then why it sets the `textInput = input` – Ramesh Pareek Aug 16 '17 at 13:58
  • same was the case in my question. – Ramesh Pareek Aug 16 '17 at 13:59
  • textInput contain the reference to dom element so you can later use it. But assigning it does not replace it in dom. Its just a reference to element in tree. You cannot replace tree node like this. – Amid Aug 16 '17 at 14:01
  • Ok, what would be the output of `console.log(textInput)`? In my imagination it would be like `` and what would be the console.log(input) give? it will be essentially `` as you mentioned in your first comment. so it means we are replacing the contents of `textInput`. Is it so? – Ramesh Pareek Aug 16 '17 at 14:05
  • You are replacing content of textInput field. It contain reference to DOM element. By assigning something to textInput you modify value of this field that is only "refer" to actual DOM node. You do not replace dom node itself. There is no such thing in javascript as passing by reference, check this post: https://stackoverflow.com/questions/7744611/pass-variables-by-reference-in-javascript – Amid Aug 16 '17 at 14:11
  • Ok. I just comprehended that textInput is nothing yet. It's just a variable which will refer to the input element AFTER the textInput=input is executed. – Ramesh Pareek Aug 16 '17 at 14:27
  • https://www.reactenlightenment.com/basic-react-components/6.9.html, this link helped me. – Ramesh Pareek Aug 16 '17 at 14:27