How do I get the 'value' and put into the className "scroll_box"?

September 12, 2022

function Following(){
  follow_render().then((value)=>{
    console.log(value)
  });
  return(
    <div className="Following">
    <div className="Following_box_flex">
      <div className="Following_box">
        <div className="user_icon"><img src="img/icon _user_.svg" alt="icon _user_" className='user_icon_image'/></div>
        <div className="Following_text">Following</div>
      </div>

      <div className="user_plus_icon"><img src="img/icon _user plus_.svg" alt="icon _user plus_" className='user_plus_icon_image'/></div>
    </div>

    <div className="scrollbox" id="friend_box">
    </div>
  </div>
  );
}

follow_render is a async function and I want to get value(type:Object) from follow_render and put into the class named "scrollbox". But error occurs again, and I don’t know how to solve it. Is it possible to put the variable named "value" into the React Componenet? If it is possible, how do i solve this problem? (Following() is a React component)

>Solution :

You can create a state that start with a null value:

const [state, setState] = React.useState(null);

And put state into "scrollbox" div:

<div className="scrollbox" id="friend_box">
  {state}
</div>

And after follow_render() ends the execution, you can set the variable "value" into your state:

follow_render().then((value) => {
  setState(value);
});

When you set a new value into your state, your component will rerender and the your "scrollbox" div will show the new state value.

To avoid rerenders, I recommend you put the follow_render() function, into a useEffect with a empty array dependency, so that it runs only on component mount:

React.useEffect(() => {
  follow_render().then((value)=>{
    console.log(value)
  });
}, []);

In the end, your component will appear like this:

function Following(){
  const [state, setState] = React.useState(null);

  React.useEffect(() => {
   follow_render().then((value) => {
     console.log(value);
     setState(value);
   });
  }, []);

  return(
    <div className="Following">
    <div className="Following_box_flex">
      <div className="Following_box">
        <div className="user_icon"><img src="img/icon _user_.svg" alt="icon _user_" className='user_icon_image'/></div>
        <div className="Following_text">Following</div>
      </div>

      <div className="user_plus_icon"><img src="img/icon _user plus_.svg" alt="icon _user plus_" className='user_plus_icon_image'/></div>
    </div>

    <div className="scrollbox" id="friend_box">
      {state}
    </div>
  </div>
  );
}