0

I am working on react JS and I want to display the name of the div that we are in. For example in the below code I want the program to show on the page " Hello Pooja We are in div message-box " I have written the following code but it doesnt seem to work.

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render ()  {
    return (
      <div id='message-box'>
         Hello {this.props.name} We are in div {this.currentTarget.id}
      </div>
    )
  }
}
Kaushik
  • 2,072
  • 1
  • 23
  • 31
sneha sharma
  • 3
  • 4

4 Answers4

1

I don't know if you wanted such a result but you can achieve it with Refs. 

function Hello() {
 const [parentDiv, setParentDiv] = useState();
 const ref = useRef();

 useEffect(() => {
   setParentDiv(ref.current.id);
 });

  return (
     <div id='message-box' ref={ref}>
        Hello! We are in div {parentDiv}
     </div>
  )

}

Class components 

class Hello extends React.Component {
 state = {
   parentDiv: ""
  };

  ref = React.createRef();

  componentDidMount() {
   this.setState({
     parentDiv: this.ref.current.id
   });
  }

  render() {
     return (
       <div id="message-box" ref={this.ref}>
          Hello! We are in div {this.state.parentDiv}
        </div>
    );
  }
 }
mstoJS
  • 119
  • 1
  • 6
0
import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
hello(id)
{
 return (
      <div >
         Hello {this.props.name} We are in div {id}
      </div>
    )
}
  render ()  {
    return (
      this.hello({id:message-box})
    ) 
  }
}
Siva Sai Niveditha
  • 49
  • 5
  • Thanks for the suggestion But i want to know the way to use the id of the div that is inside the render function. The way youre suggesting is I make a div outside the render function and that defeats the purpose of the question. – sneha sharma Nov 05 '19 at 12:32
0

You can try something like this.

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node.id);
  }

  render ()  {
    return (
      <div id='message-box'>
         Hello {this.props.name} We are in div {this.currentTarget.id}
      </div>
    )
  }
}

I hope that helps.

Nikhil Goyal
  • 1,945
  • 1
  • 9
  • 17
0

If you are declaring div like this <div id='message-box'> you already know the id. I'm not sure why you would need this logic.

As mentioned by @mstoJS you can use refs. ref variable (for dom elements) are set only after the component is mounted to the dom.

The trick here is to force a second render to display the value of ref.

You can run the below snippet to see the results.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.forceUpdate();
  }

  render() {
    console.log("Rendering");
    return <div id = "message-box"
    ref = {
        this.myRef
      } >
      Hello {
        this.props.name
      }&nbsp;
    We are in div {
        this.myRef.current ? this.myRef.current.id : ""
      } <
      /div>
  }
}

ReactDOM.render( < Hello name = "Pooja" / > , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

Why I used this.myRef.current ? this.myRef.current.id : ""

That's because a ref to a dom element is assigned only after a component is mounted to dom (let's say displayed on browser) and render happens before component is mounted to dom.

You can run the below snippet and watch the order of componentWillMount, render and componentDidMount through the console.log statements.

You should be able to see that the ref is initialized after render method(Its available in componentDidMount which runs after render). 

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log("3. Component is mounted on dom. Value of myRef is ", this.myRef.current);
    //this.forceUpdate();
  }

  componentWillMount(){
    console.log("1. Component is about to mount on dom. Value of myRef is ", this.myRef.current);
  }

  render() {
    console.log(
      "2. Component is rendering. Value of myRef is ",
      this.myRef.current
    );
    return (
      <div id="message-box" ref={this.myRef}>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(<Hello />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

this.myRef.current ? this.myRef.current.id : "" ensures that I'm not accessing a property of a null object (Which obviously throws error) on first render, but is available for use on second render (which I'm forcing through this.forceUpdate() in componentDidMount).

Nithin Thampi
  • 3,579
  • 1
  • 13
  • 13
  • Can you explain to me please why you used { this.myRef.current ? this.myRef.current.id : "" } and not simply {this.myRef.current.id} – sneha sharma Nov 06 '19 at 12:16
  • I am using it to open accordion with a particular id (the url contains the particular id and the id that matches the accordion id opens)and the method you are suggesting makes the webpage go on an infinite loop. – sneha sharma Nov 09 '19 at 13:06
  • I guess COmponentDidMount is making the render method be called again and again – sneha sharma Nov 09 '19 at 13:09
  • componentDidMount will run only once unless it's unmounted from dom. You could post a new question with a reproducible code or edit the question if SO allows so. – Nithin Thampi Nov 09 '19 at 13:13