Im grabbing the events dynamically from my backend API however when I make the call compoentWillMount() its as if the calendar is loading first and not getting the events so its not loading/displaying the events on the calendar. I keep looking through the docs and trying different solutions and cant get anything to succeed. My components code:
import React from "react";
import Tooltip from "tooltip.js";
import moment from 'moment';
import ErrorBoundary from "../Utils/ErrorBoundary";
import FullCalendar from "#fullcalendar/react";
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction";
import "#fullcalendar/core/main.css";
import "#fullcalendar/daygrid/main.css";
class ChoreCalendar extends React.Component {
constructor(props) {
super(props);
this.state = {
chores: [],
events: []
};
}
componentWillMount() {
fetch('http://localhost:8080/api/chores')
.then(res => res.json())
.then((data) => {
this.setState({ chores: data })
data.data.forEach(chore => {
this.state.events.push({
title: chore.title,
date: moment(chore.dueDate).format("YYYY-MM-DD"),
color: "green",
textColor: "white"
})
});
})
.catch(console.log)
}
eventRender(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.title,
placement: "top",
trigger: "click",
container: "body"
});
}
render() {
return (
<div className="ibox">
<div className="ibox-content">
<ErrorBoundary>
<FullCalendar
id="fullCalendar"
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
events={this.state.events}
eventRender={this.eventRender}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
</ErrorBoundary>
</div>
</div>
);
}
}
export default ChoreCalendar;
All I'm currently trying to do is dynamically grab the events and then load them into the calendar and have them show.
Add initialEvent prop in FullCalender Tag and assign it some state with initial values.
Related
I have the following code that display a table's data from Laravel using axios in React.
The data is displayed in real time. How can I add a fade-in animation each time a new element is added ? https://socket.io/ shows exactly what I want to do in the example on the right.
Note that the element in the li tag is added from an event that is fired up from a creation controller.
The component :
import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
class Patient extends React.Component {
constructor(props) {
super(props)
this.state = {
patients : [],
};
}
componentDidMount() {
axios.get('api/patients')
.then(response => {this.setState({patients: response.data})})
.catch(err => console.log(err));
window.Echo.channel('home')
.listen('NewPatient', newPatientData => {
this.setState({
patients: this.state.patients.concat(newPatientData)
})
}, e => {
console.log("Error", e)
})
}
render() {
return (
<div>
<ul> { this.state.patients.slice(0).reverse().map(patient => <li>{patient.nom}</li>)} </ul>
</div>
)
}
}
export default Patient;
You can do this pretty easily with CSS animations. I've created an example below for you and if you check out the CSS, you'll see the keyframe animation which is then used by the .fadeIn selector and that class is then applied to the <li> element.
https://codesandbox.io/s/dreamy-frog-r6sr8?file=/src/styles.css
Guys Kindly i need your help. I am trying to fetch data from an Api and display it in the dom. I can see the data in the console but when i try to return data it shows a blank page and no errors. Below is my code.
App.js file
import React from "react";
import "./App.css";
import Movieapp from "./Movieapp";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: [],
date: [],
image: []
};
}
componentDidMount() {
fetch(`https://yts.mx/api/v2/list_movies.json?quality=3D`)
.then(res => res.json())
.then(data => {
console.log(data.data);
this.setState = {
title: data.data.movies[0].title,
date: data.data.movies[0].date_uploaded,
image: data.data.movies[0].background_image
};
});
}
render() {
return (
<div className="App">
<Movieapp
title={this.state.title}
date={this.state.date}
image={this.state.image}
/>
</div>
);
}
}
export default App;
Movieapp.js file
import React from "react";
const Movieapp = props => {
return (
<div>
<h1>{props.title}</h1>
<h1>{props.date}</h1>
<div>{props.image}</div>
</div>
);
};
export default Movieapp;
this.setState is a function, not a property. You have to use it properly:
this.setState({
title: data.data.movies[0].title,
date: data.data.movies[0].date_uploaded,
image: data.data.movies[0].background_image
});
Also, even though I guess you are just trying things our, there are few things to be aware of:
movies[0] can be undefined
You are getting multiple movies but showing only one. It's probably better to just save the whole data array in the state and iterate over the results in the render method
I'm trying to save card details for use later.
I have generated the SetupIntent client secret
I'm trying to use confirm card setup.
I'm following the docs here for react.
The following line:
const cardElement = this.props.elements.getElement('card')
is throwing me this error:
TypeError: Cannot read property 'getElement' of undefined
Where am I going wrong? My code is below:
This is the relevant portion of the main component:
import React from "react";
import { Elements, StripeProvider } from "react-stripe-elements";
import SaveCardForm from "./SaveCardForm";
<StripeProvider
apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
>
<Elements>
<SaveCardForm/>
</Elements>
</StripeProvider>
And this is the SaveCardForm component
import React, { Component } from "react";
import { Stripe, CardElement, injectStripe } from "react-stripe-elements";
import axios from "axios";
class SaveCardForm extends Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
}
submit = e => {
e.preventDefault()
const cardElement = this.props.elements.getElement('card');
axios.get(`${process.env.REACT_APP_API}/saveCardDetails`).then(res => {
console.log('res.data', res.data)
this.props.stripe.confirmCardSetup(res.data.client_secret, {
payment_method: {
card: cardElement,
},
}).then( confirmCardSetupRes => {
console.log('confirmCardSetupRes', confirmCardSetupRes)
})
})
}
render() {
return (
<div>
<CardElement />
<button onClick={this.submit}>
Bid For Tickets
</button>
</div>
);
}
}
export default injectStripe(SaveCardForm);
Given your components, there is no prop named elements passed into SaveCardForm. If it's access to CardElement you are after, use a ref which will give you a direct reference to that component e.g.
constructor(props) {
...
this.cardEl = React.createRef();
}
submit = e => {
...
const card = this.cardEl.current.<accessDomHere>;
this.props.stripe.confirmCardSetup(res.data.client_secret, {
payment_method: {
card
},
}).then(...)
}
render() {
...
<div>
<CardElement ref={this.cardEl} />
...
</div>
}
Switch out <accessDomHere> for whatever DOM query you need to perform to get the information you need. There may even be a React property or function you can access (I'm not familiar with the component).
I resolved this by updating to the latest version of react-stripe-elements.
There is an error in the versions before 5.1.0
I'm trying to return a venue's description using React.JS and the Foursquare API.
I understand that you need to pass the venue's ID to retrieve any additional venue information and currently I'm able to pull a certain amount of venues but none of the descriptions are appearing. Attached below is my current app.js file (with authentication details X'd out) and a screenshot of what I'm seeing in my browser.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
var foursquare = require('react-foursquare')({
clientID: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
clientSecret: 'XXXXXXXXXXXXXXXXXXXXXXXXXX'
});
var params = {
"near": "Wilkes-Barre, PA",
"categoryId": '4d4b7105d754a06374d81259',
"radius":"250"
};
export default class FoursquareDemo extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
place: null
};
}
componentDidMount() {
foursquare.venues.getVenues(params)
.then(res=> {
this.setState({ items: res.response.venues });
});
}
render() {
return (
<div>
<div>Items:</div>
{ this.state.items.map(item=> { return <div key={item.id}>{item.name} - {item.location.city} - {foursquare.venues.getVenue(item.id).description}</div>}) }
<br />
</div>
)
}
}
ReactDOM.render(
<FoursquareDemo />,
document.getElementById('root')
);
Browser Screenshot:
Ideally, I'd like to pull the description in after the venue name and the hyphen "-".
Looking for some help with the react wrapper for highcharts it seems to be throwing this error every-time I go to start the dev server for my application.
Error message Highcharts
With that Said I am sure that It is an issue with my code and not the Highcharts react wrapper. I am looking for some help to remedy this error. Thank you.
I am using another node wrapper for the Tradier API for market data and want to compare multiple tickers historically like the chart that is provided in Highchart's Demo. (Found here)
I Know I need to iterate through the returned JSON from Tradier- which
returns an array of objects for a particular ticker symbol.
{ day:
[ { date: '2017-01-03',
open: 115.8,
high: 116.33,
low: 114.76,
close: 116.15,
volume: 28781865 }...
]
I have Gone ahead and uploaded the app to a github repository. The code for the Highstock component I am trying to add in react is below, along with the github links for the used packages.
import React from 'react'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'
import Tradier from 'tradier-client';
class HighchartSector extends React.Component {
constructor(props){
super(props)
this.state = {
store: [],
openPrice: []
}
}
componentDidMount() {
const tradier = new Tradier('7svYXqoAjts9fGptLU7mtKo4Z4Oa', 'sandbox');
tradier.historical('LADR')
.then(history => history.day.map( result =>(
{
open: `${result.open}`,
})))
.then(newData => this.setState({openPrice: newData, store: newData}))
.catch(error => alert(error))
}
render() {
const { openPrice } = this.state;
const options = {
title: {
text: 'My stock chart'
},
series: [{
data: openPrice
}]
}
return (
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
/>
)
}
}
export default HighchartSector
My Git Repo: HERE
Tradier vporta wrapper: HERE
Highcharts-Official React Wrapper: HERE