Necesita el objeto de state para almacenar la variable local que React debe actualizar automáticamente. Para poder usar el objeto de state , debe convertir su código de componente funcional en componente de clase .

Aquí hay algunos cambios que hice para solucionar los problemas.

 import React, { Component } from 'react'; export class myApp extends Component { state = { word: ['1234'], topLetters: [], bottomLetters: [], filledArray: [], }; componentDidMount() { this.setState({ bottomLetters: [...this.state.word[0]], filledArray: new Array(this.state.word[0].length).fill(null), }); } handleLetters2Click = (letter, id) => { this.setState({ topLetters: [...this.state.topLetters, { letter }] }); let bottomLetters = [...this.state.bottomLetters]; bottomLetters.splice(id, 1); this.setState({ bottomLetters }); }; deleteLast = () => { if (!this.state.topLetters.length) return; const lastTopLetter = this.state.topLetters.length - 1; const lastLetter = this.state.topLetters[lastTopLetter].letter; let topLetters = [...this.state.topLetters]; topLetters.pop(); this.setState({ topLetters }); let bottomLetters = [...this.state.bottomLetters]; bottomLetters.push(lastLetter); this.setState({ bottomLetters }); }; render() { const { filledArray, topLetters, bottomLetters } = this.state; return ( <div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ marginBottom: '40px' }}> {filledArray.map((index, id, item) => ( <button key={id} className='item'> {topLetters[id] && topLetters[id].letter} </button> ))} </div> <div> {bottomLetters.map((index, id, item) => ( <button key={id} className='item' onClick={() => this.handleLetters2Click(item[id])} > {item[id]} </button> ))} </div> <button onClick={this.deleteLast} style={{ marginTop: '40px' }}> DELETE </button> </div> ); } } export default myApp;