Reactjs after displaying the array does nothing

Question

I have an input which, after the user inserts the text, I want to show each word in button c button-group. I split the sentence and scheduled it, which returns

<input .....><button onClick=....>

so I insert the text into the input, after clicking the button text.split(" ") everything works correctly so far. but nothing is displayed in the button group

<div className="btn-group" role="group" aria-label="...">
   {this.mapArrayToButtons()}
</div>

   mapArrayToButtons(){
        this.state.textArr.map((word)=>{
            console.log('the word: ',word);
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

I see the console log textArr.lengthonce and for all. but no button is displayed and nothing is displayed in the browser.

Answer 1

You will need to return the value from your function like this:

   mapArrayToButtons(){
        return this.state.textArr.map((word)=>{
            return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    }

Hope this helps!

Answer 2

, /:

1. jsx, :

let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ] 

, :

render(){

   let arrayOfJsx = [ <div>Hello</div>, <div>World</div> ] 

   return (
      <div> { arrayOfJsx } </div>
   )
}

render(){

       return (
          <div>
               <div>Hello</div>
               <div>World</div> 
          </div>
       )
}

2 - Array.prototype.forEach Array.prototype.map:

forEach, , , forEach, , , , , forEach. , , , , , Array.prototype.map:

, , .

:

let a = [ 1,2,3 ]
let b = a.map( item => item + 1 )
// b is now [ 2,3,4 ]

, , . , , .

. , . :

let a = [ 1,2,3 ]
let arrayOfJsx = a.map( item => <div key={item} > I am { item } </div> )

Answer 3

try it

mapArrayToButtons(){
    const buttons = this.state.textArr.map((word)=>{
        console.log('the word: ',word);
        return(<button key={word} type="button" className="btn btn-default" value={word}>{word}</button>);});
    return buttons;

}