I have a flashcard project I am building with React and Bootstrap. I am using json-server to simulate that my json-file is on another server.
(Project on localhost:3000, data.json file on localhost:3001).
The front-side of the card reads a title while the back reads the rest of the material from each object. I am originally pulling the data using fetch, but I am using Axios to Post and Delete cards. The one that's tripping me up is the put method.
Right now, I have a button per card that says "update" which opens a Bootstrap modal. I can't for the life of me figure out how to pass the id to the modal based on which update button is clicked. Then I want to populate the modal fields with the existing data.
Original Call to the json file
componentDidMount() {
let url = "http://localhost:3001/collections"
fetch(url)
.then(response => response.json())
.then(data => {
console.log(this.state.collections)
let collections = data.map((collection) => {
return (
<div key={collection.id}>
<div className="cards">
<div className="cards-inner">
<div className="card-front">
<h3>{collection.title}</h3>
</div>
<div className="card-back">
<div>
{collection.cards.map((words) =>
<div key={words.id}>
<h4>{words.word}</h4>
<p>{words.definition}</p>
</div>
)}
</div>
</div>
</div>
</div>
**<button className="btn btn-primary" data-toggle="modal" data-target="#putCard">
Update Card
</button>**
<button className="btn btn-primary"
onClick={() => this.deleteCollection(collection.id)}>
Delete Card
</button>
</div>
)
});
this.setState({collections: collections});
});
}
Modal
<div className="modal fade" id="putCard" tabIndex="-1" role="dialog" aria-labelledby="putCardlLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="putCardlLabel">Update Card</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<ModalPutCard />
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the form inside the ModalPutCard
render(props) {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group" id={this.state.value}>
<label htmlFor="cardTitle">Title:</label>
<input type="text" className="form-control" name="title" id="cardTitle" aria-describedby="text" onChange={this.handleChange} value={this.state.title} />
<label htmlFor="cardState">State:</label>
<input type="text" className="form-control" name="cardState1" id="cardState1" aria-describedby="text" onChange={this.handleChange} />
<label htmlFor="cardComponent">Component:</label>
<input type="text" className="form-control" name="cardComponent1" id="cardComponent1" aria-describedby="text" onChange={this.handleChange} />
<hr></hr>
<label htmlFor="cardState">State:</label>
<input type="text" className="form-control" name="cardState2" id="cardState2" aria-describedby="text" onChange={this.handleChange} />
<label htmlFor="cardComponent">Component:</label>
<input type="text" className="form-control" name="cardComponent2" id="cardComponent2" aria-describedby="text" onChange={this.handleChange} />
<hr></hr>
<label htmlFor="cardState">State:</label>
<input type="text" className="form-control" name="cardState3" id="cardState3" aria-describedby="text" onChange={this.handleChange} />
<label htmlFor="cardComponent">Component:</label>
<input type="text" className="form-control" name="cardComponent3" id="cardComponent3" aria-describedby="text" onChange={this.handleChange} />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
);
}
I would think it would be is simple as this.state.title, or maybe this.props.title (Or whatever one I'm working on), however, I always get an undefined, which makes me think I'm never passing the id to the modal in order to display the values.
Can I use the regular Bootstrap Modal?
Is this even possible?
Any help or hints would be awesome.
I also read through the components and state section of the React docs, trying to do it without Hooks at this point.
Here is my github: Github
Top comments (0)