Paywall partial content in React

Question

I am currently working on a component, which receives its main content data from an external api.

The data is in the form of string with html content, so I am using dangerouslySetInnerHTML to render content.

{ ....

content: "<div id="attachment_565754" class="wp-caption alignnone"> <img class="size-large wp-image-565754"...../>"

......
}

<div className="col col-sm-12 col-md-12 col-lg-12"dangerouslySetInnerHTML {{__html: this.props.postDetails.content}}>
</div>

The requirement is to partially hide content, once the user has visited the site 5 times. For the time being I am using localstorage keep track of user visits, as the temporary solution for this part.

But how do I partially block the content, when all the content is coming from an external api.

Answer 1

Ideally you wouldn't even load it if you don't need it. Then, regardless of if you've loaded it or not, use some local variables to determine if it should render:

constructor(props) {
  super(props);
  this.state = {};
}

componentDidMount() {
  const shouldLoad = this.shouldLoad(); // Would return true/false based on localStorage value

  if (shouldLoad) {
    someDataCall().then((data) => {
      this.setState({ data });
    });
  }
}

render() {
  const data = this.state.data;

  return (
    <div>
    {data &&
      <div
        className="col col-sm-12 col-md-12 col-lg-12"
        dangerouslySetInnerHTML={{__html: this.props.postDetails.content}}>
      </div>
    }
    </div>
  );
}

Doing this, the div with data in it is only rendered if data has been loaded, and data will only load if your localStorage values say it should.