I’m using the CockTailDB to get drinks to save to my collection. This is my component.
import { withTracker } from 'meteor/react-meteor-data';
import Drinks from '../api/drinks';
class RandomDrink extends Component {
state = {
randomCocktail: []
};
async componentDidMount() {
try {
const res = await fetch(
'https://www.thecocktaildb.com/api/json/v1/1/random.php'
);
const randomCocktail = await res.json();
this.setState({
randomCocktail: randomCocktail.drinks
});
} catch (e) {
console.log(e);
}
}
addDrink = (cocktail) => {
Drinks.insert({
name: cocktail.strDrink,
instructions: cocktail.strInstructions,
image: cocktail.strDrinkThumb
});
};
render() {
return (
<div>
<h1>Cocktail</h1>
{this.state.randomCocktail.map((cocktail) => {
return (
<div key={cocktail.idDrink}>
<h1>{cocktail.strDrink}</h1>
{cocktail.strInstructions}
<img src={cocktail.strDrinkThumb} alt="" />
<button onClick={this.addDrink}>Add Drink</button>
</div>
);
})}
</div>
);
}
}
export default withTracker(() => {
// Meteor.subscribe('randomDrink');
return {
drinks: Drinks.find({}).fetch()
};
})(RandomDrink);
When I go Add, I just get a new collection but with a new ID. Should I use axios.post(‘api/drinks’) How will I get the name image and instruction to save to my collection?
Thanks