0

I am messing around with a simple trivia api trying to become more familiar with REACT. I noticed the question data is returning with special character codes. The react jsx is not liking it. What is a method to convert these characters easily?

The output should convert special characters ...

const App = () => {
return (
    <>
        <Header />
        <TriviaQ />
    </>
);
};
const Header = () => {
return <h1>Daily Trivia</h1>;
};
const TriviaQ = () => {
const path = "https://opentdb.com/api.php?amount=1";

const [trivia, setTrivia] = React.useState([]);
React.useEffect(() => {
    async function getDat() {
        const res = await fetch(path);
        const data = await res.json();

        console.log(data.results);
        setTrivia(data.results);
    }
    getDat();
}, []);

return (
    <div>
        {trivia.map((d) => (
            <div>
                <Category type={d.category} />
                <Question q={d.question} />
                <Answer
                    wrong={d.incorrect_answers}
                    right={d.correct_answer}
                    questionType={d.type}
                />
            </div>
        ))}
    </div>
);
};
const Category = ({ type }) => {
return <div>{type}</div>;
};
const Question = ({ q }) => {
return <div>{q}</div>;
};
const Answer = ({ wrong, right, questionType }) => {
return (
    <div>
        {questionType === "boolean" && <div> TRUE OR FALSE</div>}
        {questionType === "multiple" && <div>MULTIPLE CHOICE</div>}
    </div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
M0nst3R
  • 5,186
  • 1
  • 23
  • 36
Grapes and Cheese
  • 11
  • 1
  • Does this answer your question? [Unescape HTML entities in JavaScript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) – M0nst3R Aug 14 '23 at 20:19
  • What do you mean with special, and what do you want to 'parse' these special characters into? Examples help – Evert Aug 14 '23 at 20:22
  • @M0nst3R the response of your API call will be " {"response_code":0,"results":[{"category":"Science: Computers","type":"boolean","difficulty":"easy","question":"The programming language "Python" is based off a modified version of "JavaScript".","correct_answer":"False","incorrect_answers":["True"]}]}" Now what kind of special characters you are expecting from that response? – Ahsan Khalid Aug 14 '23 at 20:31
  • I am getting quot; and other characters like #039; etc. Mostly in the questions. I'll try the link above; thank you. – Grapes and Cheese Aug 14 '23 at 21:45

1 Answers1

0

I was able to get my characters to output correctly using:

const Question = ({ q }) => {
    const v ={__html: q}
    return <div dangerouslySetInnerHTML={v} />
}
Grapes and Cheese
  • 11
  • 1