How do I replace "br" tags in axios response with actual "br" tags?-CodePudding

using: React, WordPress REST API, Axios

I'm pulling results from a custom post type and when I get the results for the field "acf.other" which is a textbox field, whenever the user inputs a return, it puts either (depending on the cpt settings) a <br /> tag, </p> <p> tags, or nothing, resulting in a running paragraph w/ no formatting. If it puts the tags, then the results show the tag on the site, and doesn't actually use the tags (see img).screenshot of results

export const SingleRecent = () => {
    const { singleSlug } = useParams();
    const [single,setSingle] = useState([]);

    useEffect(() => {
        axios.get(recent   singleSlug)
        .then(response => {
            setSingle(response.data);
        })
        .catch((error) => {
            console.log(error);
        })
    
    }, [singleSlug]);
    
    return (
        <><div className="pagebg singlePageBg">
            <main>
                <div className="container notHomeContainer singleContainer">
                    <div className="gallery notHomeGallery singleGallery">
                        {single.map(single_recent => <SingleRecentItems key={single_recent.id} single_recent={single_recent} />)}
                    </div>
                </div>
            </main>
        </div></>
    );
}

class SingleRecentItems extends Component {
   
    render() {
        let { acf } = this.props.single_recent;
        return (
            <>
                <h1>{acf.title}</h1>
                <h4>{acf.style}</h4>
                <div className="photos">
                    <span className="recentPhoto">
                        <img 
                            src={acf.photo}
                            alt={acf.title} 
                        />
                    </span>
                </div>
                <div className="otherInfo">
                    {acf.other}
                </div>
                <div className="location">
                    Photo Taken in: {acf.location_other}<br />
                    {acf.location_city}<br />
                    {acf.location_state}<br />
                    {acf.location_country}
                </div>
                <div className="keywords">
                    {acf.subject}
                </div>
            </>
        )
    }
}

I'd like to take the results of {acf.other} and turn the tags into functional tags so that it will format the results (more or less) the way the user intended. Can I somehow assign {acf.other} to a var, parse and concat, and return the results? Is there a better way?

CodePudding user response：

Try parsing the result String to escape the HTML characters. It could look something like this:

       parsedResult = response.data
                .replace("\\u003c", "<")
                .replace("\\u003d", "=")
                .replace("\\u003e", ">")
                .replace("\\u0026", "&");

It might be the case you'll need to escape more characters. A quick lookup will give you the needed codes.

Hope this helps!

CodePudding user response：

The general rule is that you don't want to treat your data as code. If this were third-party data, a malicious user might write a <script src="steal-their-cookies.xyz"> into your webpage, which you'd much rather see as "<script src="steal-their-cookies.xyz">" on the page rather than as executed code! Inserting user-generated data into your page as code is a great way to expose yourself to cross-site scripting (XSS) attacks and other page-breaking and data-stealing hazards.

However, in your case, the data is supposed to be code, and is supposed to come from a trusted source. To enable your use-case, React has a dangerouslySetInnerHTML property that allows you to treat this data as code. As in this LogRocket blog, this makes sense for a CMS that has trusted editors submitting rich text, but you should be aware of the hazards and use the property with extreme caution.

<!-- Beware the caveats above. -->
<div className="otherInfo" dangerouslySetInnerHTML={acf.other} />