ReactJS: How to use refs() for setting 'innerHTML' inside component?

Question

Here I am trying to set innerHTML from my Test.js on render inside my componentDidMount. On the process I am getting errors of Unhandled Rejection (TypeError): Cannot set property 'innerHTML' of null .

I have gone through few questions where it defined to use refs() but unfotunately not able to use this in my case.

Any suggestion how can I use refs() here in my example?

demo Test.js

function updateList() {
    const json = JSON.parse(localStorage["values"]);
    if (json) {
        picture = json.picture;
        if (picture) {
        userPicture = picture.name;
        }

    }
    console.log(userPicture, "userPicture");
    document.getElementById('picture').innerHTML = userPicture;
}

async function getAll () {
    await updateList();

}

export default {
    getAll
};

TestComponent.js

import React from 'react';
import Test from './Test';

class TestComponent extends React.Component {
    constructor(props) {
        super(props);
        
    }
    componentDidMount() {
        Test.getAll();
    }

  render() {
    return (
        <div className="test-item" >
            <div className="test-picture" id="picture"> </div>
        </div>

    );

  }
};


export default (injectIntl(TestComponent));

does document.getElementById('picture') matched anything ? — ezio4df
– ezio4df, Commented Oct 14, 2020 at 8:26
yes.. <div className="test-picture" id="picture"> </div> . This is an example although. But same format is being there. — Tammy
– Tammy, Commented Oct 14, 2020 at 8:27
well, i cant catch any problem from the above example, can u provide minimum reproduced example in a sandbox ? — ezio4df
– ezio4df, Commented Oct 14, 2020 at 8:35
Are you just experimenting? Because what you are trying to do is antipattern, you shouldn't set innerHTML directly. If you absolutely have to set html, use dangerouslySetInnerHTML — Riwen
– Riwen, Commented Oct 14, 2020 at 9:39

Praneeth Kumar Parayil · Accepted Answer · 2020-10-14 11:24:04Z

1

I believe this is what you want.

Code sandbox url - https://codesandbox.io/s/fervent-surf-n72h6?file=/src/index.js

App.component

import React from "react";
import { render } from "react-dom";
import Test from "./Test";

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

  componentDidMount() { 
    Test.getAll(this.divRef);
  }

  render() {
    return (
      <div className="test-item">
        <div className="test-picture" ref={this.divRef} id="picture">
          Hello from component
        </div>
      </div>
    );
  }
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

Test.js

function updateList(ref) {
  ref.current.innerHTML = "Hello from Test.js";
}

async function getAll(ref) {
  await updateList(ref);
}

export default {
  getAll
};

answered Oct 14, 2020 at 11:24

Praneeth Kumar Parayil

324 bronze badges

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

8 Comments

Tammy Over a year ago

Hi Praneeth, Thanks for your time. Yes it is working for a single ref if I have 3 refs with like for picture, music , art etc.. Any luck there

Praneeth Kumar Parayil Over a year ago

I am actually against using too much refs :-). Refs is very much like a pointer to one control. So you should be creating that many instances of references. As you mentioned 3 then 3 React.createRef() instance and attach to the control which you want to use. I hope I did not misunderstand your question. A code sandbox /snippet might help me understand better

Tammy Over a year ago

any other solution then.. As This seems not so workable here for 3 different or may be more.

Tammy Over a year ago

As because getAll() will return music , art, picture etc which How cn I handle then.And I have some other innertext as well .

Tammy Over a year ago

As well as some error is also coming here . Unhandled Rejection (TypeError): Cannot read property 'current' of undefined

|

Collectives™ on Stack Overflow

ReactJS: How to use refs() for setting 'innerHTML' inside component?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related