Search code examples
jsonreactjswordpress

Wordpress Headless to reactJS with wp-api

I want to make an app with a wordpress headless server and a react app for the front end with the wp-api.

I can get my data but with html tags. I want to build my html into react, not into wordpress.

I don't know how to do this, I tried to trim the html with wpautop who makes content as plain text (https://codex.wordpress.org/Function_Reference/wpautop), but now I'm stuck because, what if I need to put a picture or a list in the middle of my content with this plaintext :D ? I don't know if there are solutions for this, that's why I'm asking here.

Regards !

Solution

  • Create one common function for removing HTML tags in the react side like.

    removeTags = (str) => {
  if ((str===null) || (str===''))
  return false;
  else
  str = str.toString();
  return str.replace( /(<([^>]+)>)/ig, '');
}

    and call it whenever you get data from Wordpress API like:

    this.removeTags(post.excerpt.rendered)

    You can check my repo for more information:

    https://github.com/BRdhanani/headless-wordpress-with-react