remove text from button that created in loop - reactjs

Question

I'm using react native to build an App
I setup a loop that create button with letter inside each button
I want that onPress will run function that delete the letter inside the button that pressed
So far my code is as follow:
let LettersBoxes = [];
var test = [];
for (let i = 0; i < answerlen; i++) {
console.log(test)
let letter = answer[mixingLetters[i]]
console.log('check',letter)
LettersBoxes.push(
<TouchableOpacity onPress={() => this.onClick(letter, test)} style={styles.boxStyle} key={i}>
<Image
source={require('../../img/parchment3.gif')}
style={{width: 40, height: 40, alignItems: 'center'}}
>
<View>
<Text
style={{fontSize:28, fontWeight: 'bold',}}>
{letter}
</Text>
</View>
</Image>
</TouchableOpacity>
);
}
return(
<View style={styles.viewStyle}>{LettersBoxes}</View>
)
}
};
Is it possible to do what I am trying to do?

Answer 1

If you want to create components dynamically, with a button created for each letter in an array of letters, you can do something like the following (inside the render method).
const letters = ['a', 'b', 'c'];
const buttons = letters.map(letter => (
<Button>{letter}</Button>
);
return (
<View>
{buttons}
</View>
);
I have omitted many things to focus on the functionality. Also, instead of "Button" you can use TouchableOpacity and add the missing props.
Essentially, given a list of letters, you want to map each letter to a button component whose content includes the letter. Then, React knows how to render an array of components by simply saying the variable name in the return part in JSX.
Now, to delete the content of a button that is clicked ("deleting the letter"), you would have to move the list of letters to the component state. There you could define a data structure like:
// component state
{
letters: {
a: true,
b: false,
c: true,
// ...
}
}
In the above structure, if this.state.letters['a'] is true, you show the letter; otherwise, you don't show it. Simply put, do the following when you map:
const buttons = Object.keys(this.state.letters).map(letter => {
if (this.state.letters[letter]) {
return <Button onClick={() => onSomethingClick(letter)}>{letter}</Button>;
}
else { // no letter should appear, so empty content
return <Button onClick={() => onSomethingClick(letter)}></Button>;
}
}
where the onClick event handler method is defined as something like:
onSomethingClick = (letter) => {
this.setState({
letters: {
...this.state.letters, // use Object.assign if you can't use spread operator
[letter]: !this.state.letters[letter] // switches T to F and vice-versa
}
}
}