Tengo una serie de palabras que se pasan a un componente y trato de mostrar cada palabra debajo de la otra en las etiquetas de entrada, pero se muestran una al lado de la otra.

mi archivo:

 const Words = ({arr}) => { let num = ((100/arr.length) - (1)).toString() + '%'; console.log(arr) return ( <div> {arr.map((letter, idx) =>{ return( <input className="letters" type='text' key={idx} style={{width: num}} /> ) })} <br/> </div> )

}

archivo CSS:

 .letters{ display: flex; float:left; margin-left: 2px; }

mi archivo principal:

 const App = () => { let words = ['Hello', 'World'] return( <Container className="main-content"> {words.map((word) =>{ return( <Words arr={word.split('')} /> ) })} </Container> ); }

archivo CSS:

 .main-content{ display: flex; background-color: gray; color: white; min-height: 100vh; width: 100%; align-items: center; justify-content: center; left: 10%; }