I'm new to this, so it would be great if someone could point me out in the right direction. I'm attaching a piece of code, it belongs to a component I'm trying to create that SHOULD display a sentence where the user can fill out the blank spaces. In this instance, the blank spaces in the sentence are passed as *. I break the sentence into (sub)sentences and then put the textInput after each one of them except for the last one, which I add at the end. Here is the code:
else {
//fill out the blanks
questionText = questionText.split("*");
let lastPiece = questionText.pop();
return (
<View style={styles.question}>
<Text style={{marginBottom:"20px"}} h4>Fill out the blank spaces:</Text>
<View style={styles.sentence}>
{questionText.map((piece) => {
return (
<View style={styles.subsentence}>
{piece.split(' ').map((word) => {
return (<Text>{word} </Text>)
})}
<TextInput placeholderTextColor="white" style={styles.blank} />
</View>
)
})
}
<View style={styles.subsentence}>
{lastPiece.split(' ').map((word) => {
return (<Text>{word} </Text>)
})}
</View>
</View>
</View>
);
}
}
export default Question;
const styles = StyleSheet.create({
question: {
marginTop:"20px",
marginRight:"30px",
marginLeft:"30px"
},
blank: {
backgroundColor: "white",
},
sentence:{
display: 'flex',
flexDirection: 'row',
},
subsentence: {
display: 'flex',
flexDirection: 'row',
flexWrap:'wrap'
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>For some reason the elements won't wrap, I've tried different things but nothing seems to work. Am I missing something?