Sandbox

const Button = ({ setValue }) => (
  <button onClick={() => setValue((prev) => prev + 1)}>
    Click me
  </button>
);


// Main component will be rendered
const Main = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <Button setValue={setCount} />
    </div>
  );
};

Using the editor

The sandbox gives you the freedom to experiment with the knowledge you've acquired. Several presets are available: these not only prefill the editor with a functional code example to provide you with a foundation but also add internal elements necessary for code execution. Therefore, make sure to choose the preset that suits the type of code you want to write.

While the use of an IDE remains indispensable for many features, we wanted to offer you the freedom to practice without the need to install anything, from any machine. To make the experience a bit more enjoyable, you can use some shortcuts in the code editor:

• ctrl + ↑: Swap the current line with the previous line
• ctrl + ↓: Swap the current line with the next line
• ctrl + alt + ↓: Duplicate the current line
• ctrl + /: Comment / Uncomment the selection