i am working on autocomplete with reactjs and react material-ui. Now its working on only one field name symbol but i want its work on multiple fields name like "symbol and name" Here is my working code and API response. API response filed name return row.symbol;
React search code
import React, { Component } from "react";
import Autocomplete from "./Autocomplete";
import { render } from "react-dom";
import ApiService from "../../service/ApiService";
const style = {
flexGrow: 1,
};
export class SearchScripComponent extends Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
searchArray: [],
message: null,
};
this.searchScripData = this.searchScripData.bind(this);
}
componentDidMount() {
this.searchScripData(this.requesDATA2());
}
requesDATA2() {
let data1 = { symbolOrName: "TATA" };
return data1;
}
searchScripData(searchScrip: any) {
ApiService.searchScripDataList(searchScrip).then((res) => {
this.setState({ searchArray: res.data.data });
});
}
render() {
const suggestions = this.state.searchArray.map((row: any) => {
return row.symbol;
});
return <Autocomplete suggestions={suggestions} />;
}
}
export default SearchScripComponent;
API Data
{
"statusCode": 200,
"message": "SUCCESS",
"data": [
{
"scripId": 299,
"symbol": "TATAGLOBAL",
"name": "abc"
},
{
"scripId": 520,
"symbol": "TATAYODOGA",
"name": "ttp"
},
{
"scripId": 1195,
"symbol": "TATASPONGE",
"name": "eer"
},
{
"scripId": 30,
"symbol": "TATASTLBSL",
"name": "qwer"
}
]
}
Related
I'm currently learning how to use apollo client as for a graphql API exposed via graphene-django's DjangoObjectType node. Here's an example
I define a node
class CompanyNode(DjangoObjectType):
class Meta:
model = Company
filter_fields = {
'domain': ['exact'],
'name': ['exact', 'icontains', 'istartswith']
}
interfaces = (graphene.relay.Node, )
class Query(graphene.ObjectType):
companies = DjangoFilterConnectionField(CompanyNode)
A typical query looks like this
query queryCompanies {
companies {
edges {
node {
id
name
__typename
}
}
}
}
And the response is
{
"data": {
"companies": {
"edges": [
{
"node": {
"id": "Q29tcGFueU5vZGU6MQ==",
"name": "great",
"__typename": "CompanyNode"
}
},
{
"node": {
"id": "Q29tcGFueU5vZGU6MTI=",
"name": "awesome",
"__typename": "CompanyNode"
}
},
]
}
}
}
I'm using apollo client with react for the frontend and my queries are returning okay. A typical component looks like this.
To initialize some state in index.js I'm writing the companies data to the cache.
const cache = new InMemoryCache();
cache.writeData({
data: {
companies: {
edges: [],
typename: 'CompanyNodeConnection',
__typename: 'CompanyNodeConnection',
},
},
});
Then in my component, I'm reading from my cache like below.
import React from 'react';
import { useQuery, useApolloClient } from '#apollo/react-hooks';
const Companies = () => {
const root = useApolloClient().cache.data.data;
const QUERY_ALL_COMPANIES = gql`
query getCompanies {
companies {
edges {
node {
id
name
}
}
}
}
`;
const { loading, error } = useQuery(QUERY_ALL_COMPANIES);
if (error) {
return <p>{JSON.stringify(error?.graphQLErrors[0]?.message)}</p>;
}
return (
<div>
<h2>Companies</h2>
{loading ? (
<p>loading</p>
) : (
<div>
{root['$ROOT_QUERY.companies'].edges.map((com) => {
const { id: edgeKey } = com;
const {
node: { id: itemNodeId },
} = root[edgeKey];
const { id, name } = root[itemNodeId];
return (
<div key={id}>
{name}
</div>
);
})}
</div>
)}
</div>
);
};
export default Companies;
Now my question is, is this the proper way to initialise this state? Secondly, is this the proper way of reading this particular query from the cache?
I'd like to see other patterns and opinions on what works. I'm thinking this pattern of reading state is too brittle.
I am trying to implement a feature where in on click of each row, I need to get the info of the row that is been clicked and corresponding row color should be changed to something else. And when I select multiple rows using Ctrl+mouse-click the corresponding rows color should also get changed, and need to get the info of corresponding rows in the form of array. I need to have a common getTrProps function that should implement both of this . Can someone help me out with this
Codesandbox: https://codesandbox.io/s/react-table-row-table-0bbyi
App
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import { Column } from "react-table";
interface IProps {}
interface IState {
data: IUser[];
columns: Column<IUser>[];
}
export interface IUser {
firstName: string;
status: "Submitted" | "Pending" | "Approved";
age: string;
}
export interface IColum {
Header: string;
accessor: string;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
data: [],
columns: []
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getData = () => {
const data: IUser[] = [
{ firstName: "Jack", status: "Submitted", age: "14" },
{ firstName: "Simon", status: "Pending", age: "15" },
{ firstName: "Pete", status: "Approved", age: "17" }
];
this.setState({ data });
};
getColumns = () => {
const columns: IColum[] = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Age",
accessor: "age"
}
];
this.setState({ columns });
};
onClickRow = (rowInfo: IUser) => {
console.log("You clicked: " + JSON.stringify(rowInfo));
};
render() {
return (
<>
<DataGrid
data={this.state.data}
columns={this.state.columns}
rowClicked={this.onClickRow}
/>
<DataGrid data={this.state.data} columns={this.state.columns} />
</>
);
}
}
DataGrid
import * as React from "react";
import ReactTable, {
RowInfo,
Column,
ComponentPropsGetterR
} from "react-table";
import "react-table/react-table.css";
import { IUser, IColum } from ".";
interface IProps {
data: IUser[];
columns: Column<IUser>[];
// The ? makes it optional
rowClicked?: (user: IUser) => void;
}
export default class DataGrid extends React.Component<IProps> {
rowClick: ComponentPropsGetterR = (state: any, rowInfo: RowInfo) => {
const rowClicked = this.props.rowClicked;
return rowClicked
? {
onClick: () => rowClicked(rowInfo.original as IUser)
}
: {};
};
render() {
return (
<ReactTable
data={this.props.data}
columns={this.props.columns}
getTrProps={this.rowClick}
/>
);
}
}
Here is Your Final Answer :
https://codesandbox.io/s/react-table-row-table-3xwxi
you can now hold Ctrl Key and Select as many row as you want and you can toggle between.
and if you don't hold the key you can select one
you can see each time you choose a row color of the row Changes.
and you have all the data in this.state.allData.
and all of this in typescript as you want from your sandbox.
Here id my Data file for image
imageData = [
{
id: 1,
imgName: "Apple",
imgFile: "apple.jpg",
imgQuestion: "Which fruit is this",
imgAnswer: "This is an Apple"
},
{
id: 2,
imgName: "Orange",
imgFile: "orange.jpg",
imgQuestion: "What is the color of Orange",
imgAnswer: "The color of orange os orange"
},
{
id: 3,
imgName: "Mango",
imgFile: "mango.jpg",
imgQuestion: "Do you like Mangoes",
imgAnswer: "Yes I like Mangoes"
}
]
I don't know why my code is showing error message in browser console:
Uncaught TypeError: this.state.imgData.map is not a function
import React, { Component } from 'react';
import Jokes from './../components/Jokes';
import Data from './../data';
export default class Index extends Component {
constructor() {
super()
this.state = {
imgData: Data
}
}
render() {
const imgDataItem = this.state.imgData.map(item => {
<Jokes data={{key: this.item.id}}
data={{
img: this.item.imgName,
imgFileName: this.item.imgFile,
question: this.item.imgQuestion,
answer: this.item.imgAnswer
}}
/>
})
return (
{imgDataItem}
)
}
}
I am new to react and please get me the solution where I am getting wrong
Try destructuring with assignment by default value for imgData
render() {
const {imgData = []} = this.state;
const imgDataItem = imgData.map(item => {
<Jokes data={{key: this.item.id}}
data={{
img: this.item.imgName,
imgFileName: this.item.imgFile,
question: this.item.imgQuestion,
answer: this.item.imgAnswer
}}
/>
})
return (
{imgDataItem}
)
}
link to GitHub project: https://github.com/jkey774/codecademy-ravenous
I have been trying for a few days now to add a new feature to my little app that displays the total number of results for businesses retrieved from a Yelp API call. I can console.log(jsonResponse.total) just before mapping each business but am unsure how to set this up in the return statement to where jsonResponse.total from Yelp.js can be accessed in App.js to do something like setState({ total: total }). Do I need to make a separate API call just to get the total?
here is an example of what the response body looks like:
{
"total": 8228,
"businesses": [
{
"rating": 4,
"id": "E8RJkjfdcwgtyoPMjQ_Olg",
"review_count": 1738,
"name": "Four Barrel Coffee",
"image_url": "http://s3-media2.fl.yelpcdn.com/bphoto/MmgtASP3l_t4tPCL1iAsCg/o.jpg",
"location": {
"city": "San Francisco",
"state": "CA",
"address1": "375 Valencia St",
"zip_code": "94103"
}
},
// ...
]
}
in my Yelp.js file:
const Yelp = {
search(term, location, sortBy) {
const limit = 21;
return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}&limit=${limit}`, {
headers: {
Authorization: `Bearer ${apiKey}`
}
}).then(function (response) {
return response.json();
}).then(function (jsonResponse) {
if (jsonResponse.businesses) {
return jsonResponse.businesses.map(function (business) {
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count
};
});
}
});
}
};
export default Yelp;
in my App.js file
import React from 'react';
import BusinessList from './components/BusinessList/BusinessList';
import SearchBar from './components/SearchBar/SearchBar';
import Yelp from './util/Yelp';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
total: 0,
businesses: []
}
this.searchYelp = this.searchYelp.bind(this);
}
searchYelp(term, location, sortBy) {
Yelp.search(term, location, sortBy).then((businesses) => {
this.setState({
businesses: businesses
})
})
}
render() {
return (
<div className="App">
<h1>ravenous</h1>
<SearchBar searchYelp={this.searchYelp} />
<BusinessList businesses={this.state.businesses} />
</div>
);
}
}
export default App;
Welcome to Stack Overflow. As you mentioned, you can set multiple keys in a single call to setState, so all you have to do is get the total to your App.js.
In Yelp.js you need to return the total along with the list of businesses. You could do something like:
if (jsonResponse.businesses) {
return {
total: jsonResponse.total,
businessList: jsonResponse.businesses.map(function (business) {
// ... same code as you have before
Then, rework your setState just a little bit in App.js:
Yelp.search(term, location, sortBy).then((businessData) => {
this.setState({
businesses: businessData.businessList,
total: businessData.total
})
})
I'm having difficulties fetching data from an API in a React app with a simple standard template for fetching API data. The returned result from the console logs are blank arrays.
import React, {Component} from 'react';
import './App.css';
import Chart from './components/chart'
const API_URL = "http://ergast.com/api/f1/2016/1/results.json";
class App extends Component {
constructor(props) {
super(props)
this.state = {
results: [],
};
}
componentDidMount() {
fetch(API_URL)
.then(response => {
if (response.ok) {
return response.json()
}
else {
throw new Error ('something went wrong')
}
})
.then(response => this.setState({
results: response.MRData
})
)}
render() {
const {results} = this.state;
return (
<div className="App">
<Chart data={results}/>
</div>
);
}
}
export default App;
chart.js
import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';
const Chart = (props) => {
console.log(props.data);
const dataArr = props.data.map((d)=> {
return {x: d.RaceTable.Results.Driver.driverId, y: d.RaceTable.Results.position}
});
console.log(dataArr);
return (
<XYPlot
xType="ordinal"
width={1000}
height={500}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis title="Driver" />
<YAxis title="Race Finish Position" />
<LineSeries
data={dataArr}
style={{stroke: 'violet', strokeWidth: 3}}/>
</XYPlot>
);
}
export default Chart;
Really cannot figure out where I have gone wrong. I have set the state correctly with results: response.MRData isn't it? (MRData is the key of the JSON.) This is the structure of the json. API Link: http://ergast.com/api/f1/2016/1/results.json
JSON Example Response
{
"MRData": {
"xmlns": "http://ergast.com/mrd/1.0",
"RaceTable": {
"Races": [
{
"season": "2008",
"round": "1",
}
},
"Results": [
{
"position": "1",
"Driver": {
"driverId": "hamilton",
"permanentNumber": "44",
"code": "HAM",
"url": "http://en.wikipedia.org/wiki/Lewis_Hamilton",
"givenName": "Lewis",
"familyName": "Hamilton",
"dateOfBirth": "1985-01-07",
"nationality": "British"
},
}
},
.
.
.
]
}
]
}
}
}