A board where you can set foreground and background colors, and also tap blocks to set colors.

board_colors_clicker.js

import styled from 'styled-components';
import { useMemo, useRef, useState, useEffect, createContext, useContext } from 'react';

const Butn=styled.button`
  background: ${props => props.primary ? "navy" : "#4CAF50"};
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
`

const Fleg=styled.div`
  display: flex;
`

const Col=styled.div`
  display: flex;
  justify-content: center;
  flex: 1;
  background-color: #a57a5a;
  text-align: center;
  margin-left: 1vw;
  margin-right: 1vw;
  margin-bottom: 1vh;
`

const palette=["#a57a5a","#9addfb","blue","navy","red","pink","green","yellow","orange","purple","#cc9c80","brown","white","gray","black"];

const Color = ({color}) => {
	const [index,setIndex]=useState(color);
	function setColour(value){
		let val=(value+1) % (palette.length);
		setIndex(val);
	}
	useEffect(()=> {
		setIndex(color)
	}, [color]);
	return (
		<>
		<Col style={{backgroundColor: palette[index]}} onClick={()=>setColour(index)}><p></p></Col>
		</>
	)
}
const MakeBoard = ({values}) => {
	const [back,setBack]=useState(1);
	const [fore,setFore]=useState(0);
	const size=Math.sqrt(values.length);
	let bx=Array.from({ length: Math.ceil(values.length / size) }, (v, i) => values.slice(i * size, i * size + size));
        const board = useMemo(() =>
		bx.map((item)=> <div style={{backgroundColor: palette[back]}}><Fleg>{item.map((x)=> <Color color={fore} />)}</Fleg></div>),
                [fore,back]
        );
	function setBackground(value){
		let val=(value+1) % (palette.length);
		setBack(val);
	}
	function setFrontground(value){
		let val=(value+1) % (palette.length);
		setFore(val);
	}
	return (
		<>
       		<div style={{paddingTop: '1vh', backgroundColor: palette[back],}}>
		{board}
		</div>
		<p onClick={()=>setBackground(back)}><Butn primary>back</Butn></p>
		<p onClick={()=>setFrontground(fore)}><Butn>front</Butn></p>
		</>
	)
}

function boardgrid(row,col) {
  let i=Array.from(Array(row).keys());
  let j=Array.from(Array(col).keys());
  let xy=i.map((x)=>j.map((y)=>([x,y]))).flat();
  return xy;
}

function Board() {
	const [values,setValues]=useState(boardgrid(10,10));
	return (
		<>
		<MakeBoard values={values} />
 		</>
	)
}

export default Board;