Estoy escribiendo un componente de blog simple en React. El componente obtiene la publicación de un segundo archivo y presenta el contenido y los hashtags con el map (en particular, dos map anidados). Estaba tratando de crear una parte en la que se resaltara el hashtag al hacer clic y, por lo tanto, estaba siguiendo el fragmento de la respuesta a esta pregunta . El hecho es que no funciona y, en particular, lo que no funciona es el enlace a través del bind (verificado con la salida de console.log )
class Blog extends React.Component { state= { open: {} } handleClick = (k) => { let linkOpenState = true; if (this.state.open.hasOwnProperty(k)) { linkOpenState = !this.state.open[k]; } this.setState({ open: { [k]: linkOpenState } }) } render(){ return( posts.map(i=>( <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <h1 class="title">{i.title}</h1> <p> {i.content} </p> </div> <div class="tags"> {i.hash.map(k=>(<span id={k} onClick={this.handleClick.bind(this,k)} class={this.state.open[k]? "tag is-primary" : "tag"} >{k}</span>))} </div> </div> </article> </div>)) ) } } export default Blog¿Alguien tiene una idea de lo que está mal allí? ¿Es el mapa anidado un problema para el enlace?
React espera un solo elemento como retorno. Puede resolver esto envolviendo el retorno en un fragmento como <React.Fragment> o <> . Además, no necesita vincular una función de flecha ( handleClick al mapear i.hash ).
render(){ return( <> posts.map(i=>( <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <h1 class="title">{i.title}</h1> <p> {i.content} </p> </div> <div class="tags"> {i.hash.map(k=>(<span key={k} id={k} onClick={() => this.handleClick(k)} class={this.state.open[k]? "tag is-primary" : "tag"} >{k}</span>))} </div> </div> </article> </div>)) </>)}}No necesita vincular la función de flecha. Además, debe pasar una clave única a los elementos cuando se usa dentro del mapa, puede usar el índice como clave, pero si está mutando la matriz, use alguna identificación o hash o cualquier cosa que sea única.
class Blog extends React.Component { state= { open: {} } handleClick = (k) => { let linkOpenState = false; if (this.state.open.hasOwnProperty(k)) { linkOpenState = this.state.open[k]; } this.setState({ open: { [k]: linkOpenState } }) } render(){ return( posts.map((i, index)=>( <div class="box" key={i.id || index}> <article class="media"> <div class="media-content"> <div class="content"> <h1 class="title">{i.title}</h1> <p> {i.content} </p> </div> <div class="tags"> {i.hash.map(k=>(<span key={k} id={k} onClick={() => this.handleClick(k)} class={this.state.open[k]? "tag is-primary" : "tag"} >{k}</span>))} </div> </div> </article> </div>)) ) } } export default Blog