CODEWITHSUNDEEP
javascriptreactjs
jman4934
jman4934

Reputation: 33

Is there a way in React to render a component into HTML that is not its initial state?

At the moment I have the following variable that renders the initial state which is loading.... This is not what I want , what I want is to get the final rendered html of the component after the loading.

Variable beloe let popup_content = ReactDOMServer.renderToString();

Component which initial state I do not want but the final state as html.

function PopupBetaContent(props) {

  const id = props.id;
  const omm = props.outdoor_map_marker;
  const [popup_content, setPopupContent] = useState(null);
  


  useEffect(() => {
    
    axios
      .get(process.env.NEXT_API.concat('/',id), config)
      .then(res => {
        const popup_result = res.data;
        const status = res.status;

        if (status === 200) {
          if (popup_result !== null) {
            setPopupContent(popup_result);
          } else {
            location.replace('/500');
          }

        } else {
          location.replace('/500');
        }

      })
      .catch(err => {
        location.replace('/500');
      });

  }, [id]);


  if ((popup_content !== null) && (loading !== false)) {

    return (
      <>

        <div>
          {popup_content.name}

        </div>
    );
  } else {
    return <>loading....</>;
  }

}

export default PopupContent;

Upvotes: 1

Views: 105

Answers (1)

Drew Reese
Drew Reese

Reputation: 203061

You can return null to render nothing, instead of the "loading..." text.

Preventing Component from Rendering

In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.

return (popup_content !== null && !loading)
  ? (
    <div>
      {popup_content.name}
    </div>
  )
  : null;

Upvotes: 1

Related Questions