Get text content from node in React

Question

Having a bit of trouble pulling text from a node.

The node is a paragraph.

 <p className="Blend" refs="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

I’m trying to log the contents of the node to the console in a function.

 makeSmall = () => {
        var text = this.refs.hello.innerText
        console.log(text)
      }

However, this console is not returning anything. I've tried accessing the node with via className as well.

What's the proper way to access text in React?

I believe you have a type in your <p> element on the refs attribute, this should be ref — Mike Donkers
– Mike Donkers, Commented May 19, 2018 at 19:58

Qwerty · Accepted Answer · 2020-03-06 13:43:00Z

11

const getNodeText = node => {
  if (['string', 'number'].includes(typeof node)) return node
  if (node instanceof Array) return node.map(getNodeText).join('')
  if (typeof node === 'object' && node) return getNodeText(node.props.children)
}

const printHTML = ref => ref && (ref.innerText = document.querySelector('h1').outerHTML)

https://codesandbox.io/s/react-getnodetext-h21ss

  // in the picture
  {heading} // <Heading>Hello <span className="red">Code</span>Sandbox</Heading>
  <pre ref={printHTML}/>
  <pre>{getNodeText(heading)}</pre>

originally from here https://stackoverflow.com/a/60564620/985454

answered Mar 6, 2020 at 13:43

Qwerty

32.5k26 gold badges131 silver badges159 bronze badges

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

Comments

frente_fin · Accepted Answer · 2018-05-20 16:14:09Z

Thanks to everyone for contributing. There were a few mistakes in my previous approach.

Namely, trying to set the ref in a function. Below are the steps I took to make it work.

1) construct the ref using React.createRef(); (new in react 16)

class Newone extends Component {
    state = {
        allocation: "Acq",
      };
      textUrl = React.createRef();

2) append the ref to the appropriate node

 <p className="Blend" ref={this.textUrl}> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

3) reference the ref using value.innertext

handleLinkClick = (event) => {
bitly.shorten(this.textUrl.value.innerText)

**Make sure you are using React version 16.3.0-alpha.1.

Below are screenshots of the console.

bitly.shorten(this.textUrl)

bitly.shorten(this.textUrl.value)

bitly.shorten(this.textUrl.value.innerText)

Make sure to append innerText if you only want to return the text in the node.

Hope this helps

Mike Donkers · Accepted Answer · 2018-05-19 20:01:47Z

0

You have a typo in your <p> attributes,

You wrote:

<p className="Blend" refs="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

This should be:

<p className="Blend" ref="hello"> { `${this.state.landing}?utm_campaign=${this.state.utm}` } </p>

The refs attribute is the faulty one, this should be ref

For reference: (check the browser console or the in-site console) See this sandbox

Hope this helps!

answered May 19, 2018 at 20:01

Mike Donkers

3,6992 gold badges23 silver badges34 bronze badges

Comments

mrOrlando · Accepted Answer · 2018-05-19 20:05:10Z

0

Maybe you need save the text for the paragraph into the state and show it. So you will know this value:

 state = { msg: `${landing}?utm_campaign=${utm}` } 
 ...
 <p className="Blend"> { ${this.state.msg} } </p>

answered May 19, 2018 at 20:05

mrOrlando

318 bronze badges

Collectives™ on Stack Overflow

Get text content from node in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related