I got the privilege to learn something new which is react SyncFusion, so one way to learn is to try and create a small project.
prerequiste: already up and running react server
Step 1: In our src folder we are going to create a folder and within that folder define our component.js
Step 2:we need to make imports of predefined components syncfusion provides
import React from 'react';
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
React is default, MultiselectComponent and buttonComponent are components we need
- MultiselectComponent to display our titles and urls
- ButtonComponent to click or submit
Step 3:Create a class which extends the React component we imported
class GetMetaData extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
);
}
}
extend default GetMetaData
Step 4:We need to create different states that holds array values for multiselectcomponent and display component, create Ref Components [Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.] basically refs will hold the selected values of our components
Now we can update our constructor as shown below:
constructor(props) {
super(props);
this.movieInput = React.createRef();
this.urlInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
this.state = {
hits: [], //for Titles
url: [], //for URL
SelectedURL: [], //for selected URL
SelectedTitle: [] //for Selected Title
};
}
Step 5:We need to call the data from the api so will be using fetch(), but before we do fetch requires a url and any other query if required
In our case yes:
const API = 'https://hn.algolia.com/api/v1/search?query='; const DEFAULT_QUERY = 'redux';
so we create a componentDidMount() function which will immediately get invoked after a component is mounted.
componentDidMount () {
fetch(API + DEFAULT_QUERY)
.then(response => response.json())
}
Now our data is in a response we need to fetch the data and process the data and Set the state of our variables. Best way to do that is to create functions that iterate through our response data as shown below.
processmovietitle(data) {
let mv = data.hits
let movietitle = mv.map(mv => mv.title)
return movietitle
}
processmovieurl(data) {
let mv = data.hits
let url = mv.map(mv => mv.url)
return url
}
and we add a .then to setState
componentDidMount () {
fetch(API + DEFAULT_QUERY)
.then(response => response.json())
.then(data => this.setState(
{
hits: this.processmovietitle(data),
url: this.processmovieurl(data),
}));
}
.then is amazing because it holds the data and process smoothly, I used jquery ajax calls and I experienced a lot of calls made and processing made later in other words did not sync
Step 6:Lets render our data we fetched.
render() {
return (
<div>
<MultiSelectComponent id='movietitle' dataSource={this.state.hits} placeholder="Select A Title" />
<MultiSelectComponent id='url' dataSource={this.state.url} placeholder="Select a URL" />
<ButtonComponent cssClass='e-primary' >Submit</ButtonComponent>
</div>
);
}
Datasource helps displays the array of data and this.state.hits holds the new fetched data from the api
Next is when we select items in an Multi Select component we want so display them or Load them into another Multi Select component.
Then we make use of the Created Refs we made but firs our components should have them
<MultiSelectComponent id='movietitle' dataSource={this.state.hits} placeholder="Select A Title" ref={this.movieInput}/>
<MultiSelectComponent id='url' dataSource={this.state.url} placeholder="Select a URL" ref={this.urlInput}/>
As defined above in the constructor.
Our Button would hold an Onclick event which references a function too:
<ButtonComponent cssClass='e-primary' onClick={this.focusTextInput} >Submit</ButtonComponent>
Now we define a function before the render
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.movieInput.current;
this.urlInput.current;
this.setState({SelectedURL: this.urlInput.current.tempValues})
this.setState({SelectedTitle: this.movieInput.current.tempValues})
}
And we set the sate of our SelectedURL and Title. Now we can update our render code as follows:
render() {
return (
<div>
<MultiSelectComponent id='movietitle' dataSource={this.state.hits} placeholder="Select A Title" ref={this.movieInput}/>
<MultiSelectComponent id='url' dataSource={this.state.url} placeholder="Select a URL" ref={this.urlInput}/>
<ButtonComponent cssClass='e-primary' onClick={this.focusTextInput} <Submit>/ButtonComponent>
<h1>Selected Title Values: {this.state.SelectedTitle}</h1>
<h1>Selected URL Values: {this.state.SelectedURL}</h1>
<MultiSelectComponent id='Selecturl' dataSource={this.state.SelectedURL} placeholder="Selected a URL"/>
</div>
);
}
Our overall code will look like this:
import React from 'react';
import $ from 'jquery';
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const API = 'https://hn.algolia.com/api/v1/search?query=';
const DEFAULT_QUERY = 'redux';
class GetMetaData extends React.Component {
constructor(props) {
super(props);
this.movieInput = React.createRef();
this.urlInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
this.state = {
hits: [], //for Titles
url: [], //for URL
SelectedURL: [], //for selected URL
SelectedTitle: [] //for Selected Title
};
}
processmovietitle(data) {
let mv = data.hits
let movietitle = mv.map(mv => mv.title)
return movietitle
}
processmovieurl(data) {
let mv = data.hits
let url = mv.map(mv => mv.url)
return url
}
componentDidMount () {
fetch(API + DEFAULT_QUERY)
.then(response => response.json())
.then(data => this.setState(
{
hits: this.processmovietitle(data),
url: this.processmovieurl(data),
}));
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.movieInput.current;
this.urlInput.current;
this.setState({SelectedURL: this.urlInput.current.tempValues})
this.setState({SelectedTitle: this.movieInput.current.tempValues})
}
render() {
return (
<div>
<MultiSelectComponent id='movietitle' dataSource={this.state.hits} placeholder="Select A Title" ref={this.movieInput}/>
<MultiSelectComponent id='url' dataSource={this.state.url} placeholder="Select a URL" ref={this.urlInput}/>
<ButtonComponent cssClass='e-primary' onClick={this.focusTextInput} >Submit</ButtonComponent>
<h1>Selected Title Values: {this.state.SelectedTitle}</h1>
<h1>Selected URL Values: {this.state.SelectedURL}</h1>
<MultiSelectComponent id='Selecturl' dataSource={this.state.SelectedURL} placeholder="Selected a URL"/>
</div>
);
}
}
export default GetMetaData
and in the App.js we call we import our component
import GetMetaData from './getmetadata/getmetadata';
and render our component:
<GetMetaData/>
Now here is our Output
Thank You
Ehizogie Sohail Izebhijie
Helical IT Solutions Pvt Ltd
Best Open Source Business Intelligence Software Helical Insight Here
A Business Intelligence Framework
Best Open Source Business Intelligence Software Helical Insight is Here