My code was fine until I tried demoing a ReactBootstrap Modal. When I initialized the show prop passed to my Modal component from my top-level component to true (this.state.showResult in QuizApp), I keep getting
Uncaught TypeError: Cannot read property 'firstChild' of undefined
When showResult is initialized to false, it works fine.
The error occurs whenever show prop of Modal is set to true.
Eventually I'll have event handlers that set showResult to true, but for now I just wanted to see what the Modal would look like, thus initializing showResult: true.
The only relevant information I could find was that this error is caused by multiple versions of React on the same page, but I don't think that applies here. I'm creating a really simple app, doing all my transpiling/building in the browser itself, no pre-building with node
TypeError when using React: Cannot read property 'firstChild' of undefined
What makes the situation even more confusing is that show is a newly added prop that shows up in the code examples on ReactBootstrap docs but I couldn't find anything written about it in the docs.
How to open/close react-bootstrap modal programmatically?
class QuizApp
class QuizApp extends React.Component {
constructor(props) {
super(props);
this.state = { quiz: {questions: []}, showResult: true };
}
componentDidMount() {
var quizRef = new Firebase('https://firequiz.firebaseio.com/quizzes/' + this.props.i);
quizRef.on('value', snapshot => this.setState({
quiz: snapshot.val()
}));
}
render() {
let closeResult = e => this.setState({ showResult: false });
return (
<div>
{quizHeader}
<QuestionList data={this.state.quiz.questions}/>
<Result show={this.state.showResult} onHide={closeResult} />
</div>
);
}
}
class Result
class Result extends React.Component {
render() {
return (
<Modal {...this.props} bsSize='medium' aria-labelledby='contained-modal-title-md'>
<Modal.Header closeButton>
<Modal.Title id='contained-modal-title-md'>Your score</Modal.Title>
</Modal.Header>
<Modal.Body>
hello
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
}