Toggle Message

The Message component contains an anchor element and a paragraph below the anchor. Rendering of the paragraph should be toggled by clicking on the anchor element using the following logic:

At the start, the paragraph should not be rendered.
After a click, the paragraph should be rendered.
After another click, the paragraph should not be rendered.

Finish the Message component by implementing this logic.

HTML5, CSS3, React v16 (available as React and ReactDOM)

Show starting code

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
class Message extends React.Component {
  render() {
    return (<React.Fragment>
          <a href="#">Want to buy a new car?</a>
          <p>Call +11 22 33 44 now!</p>
        </React.Fragment>);
  }
}

document.body.innerHTML = "<div id='root'> </div>";
  
const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);

console.log("Before click: " + rootElement.innerHTML);
document.querySelector("a").click();
console.log("After click: " + rootElement.innerHTML);

At the start, the paragraph should not be visible: Wrong answer
After a click, the paragraph should be visible: Wrong answer
After a second click, the paragraph should not be visible again: Wrong answer

Use this question for your test

<< Previous Next >> Back to questions

Score Distribution

# of candidates

0-33%
34-67%
68-100%

Score

Would you like to see our other questions?

We have 850+ premium hand-crafted questions for 50+ job skills and 15+ coding languages. We prefer questions with small samples of actual work over academic problems or brain teasers.

Visit our question library

Private Concierge

Send us an email with an explanation of your testing needs and a list of candidates. We will create an appropriate test, invite your candidates, review their results, and send you a detailed report.

Contact Private Concierge

Would you like to see our tests? The following tests contain React related questions:

HTML/CSS and React Online Test

HTML/CSS, JavaScript, and React Online Test

HTML/CSS, React, and Node.js Online Test

HTML/CSS, React, Node.js, and SQL Online Test

React Online Test

On the TestDome Blog

Screening Applicants: The Good, the Bad and the Ugly

Since we’re all biased and we use incorrect proxies, why not just outsource hiring to experts or recruitment agencies? After all, they’ve been screening people for many years, so they must know how to do it right?

Not really. I was surprised to discover that many experts disagree with each other. Everybody praises their pet method and criticizes the others. Many of these methods look legitimate, but are based on...