How can I do a FULL OUTER JOIN in MySQL

How to add an outline to a code-generated, oddly-shaped group of buttons in React JS

Bianchi

I am working on a react project, and have a grid of buttons. Shown here.

When a group of them is pressed, I want them all to be outlined. Sort of Like this.

The big issue that I'm facing is that the size of the grid can change, so the buttons aren't hard coded. They're generated with code. And every solution I've found online so far is for hard-coded examples. I am very new to both front-end development and React, so I'm not sure how to go about doing this!

Here's the functional (as in minimal viable product) css I'm using:

/* So the size of the grid can easily be changed. */
/* The amount of buttons required is the grid size squared */
:root {
  --grid-size: 3;
}

/* The container for the squares */
.keenboard {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
}

/* The buttons themselves */
.keensquare {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(153, 153, 153);
  background-color: rgb(255,255,255);
}

and here's the functional React JS code:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

class KeenSquare extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toggled: false,
    };
  }

  handleClick = (event) => {
    this.setState({ toggled: !this.state.toggled });
  };

  render() {
    return <button className="keensquare" onClick={this.handleClick}></button>;
  }
}

class KeenBoard extends React.Component {
  render() {
    document.documentElement.style.setProperty("--grid-size", this.props.size);

    // Creates an array, and then run a mapping function on it that sets every item in that array to be its own index
    const board = Array.from(
      { length: this.props.size ** 2 },
      (_, index) => index
    );

    return (
      <div className="keenboard">
        {board.map((i) => (
          <KeenSquare key={i}></KeenSquare>
        ))}
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="gameboard" id="gameboard">
          <KeenBoard size={this.props.size} />
        </div>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game size={9}></Game>);

Thanks in advance to anyone willing to help!