export default function Row({ guess, currentGuess, length }) { if (guess) { return ( <div className="row past"> {guess.map((l, i) => ( <div key={i} className={l.color}>{l.key}</div> ))} </div> ) } if (currentGuess) { let letters = currentGuess.split('') return ( <div className="row current"> {letters.map((letter, i) => ( <div key={i} className="filled">{letter}</div> ))} {[...Array(length - letters.length)].map((_,i) => ( <div key={i}></div> ))} </div> ) } return ( <div className="row"> {[...Array(length)].map((e, i) => <div key={i}></div> )} </div> ) }