I am coding an application and the purpose of it is to show two tables: one with elements from an array and the others one with input that are suggesting elements from an another array.
I don't know how to put my data from OldData.json into my input suggestion which is -> const RecentResearches
import React from 'react';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import NewData from '../../api/data/cities.json'
import OldData from '../../api/data/historical.json'
import Pagination from './Pagination.js'
import SuggestionInputSearch from 'suggestion-react-input-search';
react class NewDataTable extends React.Component {
constructor() {
super();
this.state = {
NewData: NewData,
pageOfItems: []
};
this.onChangePage = this.onChangePage.bind(this);
}
onChangePage(pageOfItems) {
// update state with new page of items
this.setState({ pageOfItems: pageOfItems });
}
render() {
const recentSearches = [{OldData.name}];
return (
<div>
<nav><Pagination items={this.state.NewData} onChangePage={this.onChangePage} /></nav>
<table>
<tbody>
<tr>
<th>New Data</th>
<th>Old Data</th>
</tr>
{this.state.pageOfItems.map(item =>
<tr key={item.id}><td key={item.id}>{item.name}</td>
<td><SuggestionInputSearch
recentSearches={recentSearches}
/></td></tr>
)}
</tbody>
</table>
</div>
);
}
}
OldData.json :
[
{
"id": 2900000,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900001,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900002,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900003,
"name": "Isis",
"admin_area": "lomu",
"country": "Portugal"
},
{
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900005,
"name": "Satimola",
"admin_area": "Thuringen",
"country": "Taiwan"
},
...
NewData.json :
[
{
"id": 13610,
"name": "Satimola",
"admin_area": "USA"
},
{
"id": 4129,
"name": "Isis",
"admin_area": "UK"
},
{
"id": 14698,
"name": "Reban",
"admin_area": "Russia"
},
{
"id": 8194,
"name": "Randu",
"admin_area": "USA"
},
{
"id": 18867,
"name": "Randu",
"admin_area": "USA"
},
...
Related
I have the following code which displays record from Monday API successfully.
I can get the JSON record via {JSON.stringify(this.state.datax, null, 2)} as per below
[ { "items": [ { "id": "3150569213", "name": "Task 1", "column_values": [ { "id": "fullname", "value": null }, { "id": "status", "value": null }, { "id": "email", "value": null }, { "id": "phone_number", "value": null }, { "id": "address", "value": null }, { "id": "product", "value": null }, { "id": "quantity", "value": null }, { "id": "reward", "value": null } ] }, { "id": "3150569636", "name": "Recycle Products Share By ann balling", "column_values": [ { "id": "fullname", "value": "\"ann balling\"" }, { "id": "status", "value": "{\"index\":0}" }, { "id": "email", "value": "{\"text\":\"ann1#gmail.com\",\"email\":\"ann1#gmail.com\",\"changed_at\":\"2022-08-27T12:16:47.728Z\"}" }, { "id": "phone_number", "value": "{\"phone\":\"1234567890\",\"countryShortName\":null}" }, { "id": "address", "value": "{\"lat\":\"Texas,\",\"lng\":\"US\",\"address\":\"unknown\"}" }, { "id": "product", "value": "{\"text\":\"Paper,Bottles,Plastic Cans\"}" }, { "id": "quantity", "value": "\"200\"" }, { "id": "reward", "value": "\"Gift\"" } ] } ] } ]
How do I get values for name, fullname, email?
Here is the code:
import React from 'react';
import './App.css';
import mondaySdk from 'monday-sdk-js';
import 'monday-ui-react-core/dist/main.css';
const monday = mondaySdk();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
datax: [],
};
}
componentDidMount() {
monday
.api(
`query {boards (ids: 3150569212) {items(limit: 3 page: 1) {id name column_values {
id
value
} }}}`
)
.then((res) => {
console.log(res);
this.setState({ datax: res.data.boards });
//this.setState({datax: res.data.boards[0].items});
});
}
render() {
const { loading } = this.state;
return (
<div>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Fullname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{this.state.datax.map((i, index) => (
<tr key={index}>
<td>{i.name}</td>
<td>{i.fullname}</td>
<td>{i.email}</td>
</tr>
))}
</tbody>
</table>
{JSON.stringify(this.state.datax, null, 2)}
<br />
</div>
);
}
}
export default App;
You need to map the first element in that case items and then map column_values since it is an array:
{this.state.datax[0].items.map((i, index) => (
<tr key={index}>
<td>{i.name}</td>
<td>{i.fullname}</td>
<td>{i.column_values.map((val) => val.value)}</td>
</tr>
))}
I have try it with the example you send and the output I get is like this, not very clean:
Im trying to convert the following code to react hook component, but I don't understand how to convert the onOrderChange and the consts in the render parts to react hooks, how do I go about this? My goal is to have a drag and drop-able react checkbox tree component but I'm unable to convert the drag and drop part to react hooks, the other parts are in react hooks.
import React from 'react';
import CheckboxTree from 'react-checkbox-tree-reorderable';
const nodesData = './data.json'
class BasicExample extends React.Component {
state = {
nodes: nodesData,
checked:[],
expanded: [],
};
constructor(props) {
super(props);
this.onCheck = this.onCheck.bind(this);
this.onExpand = this.onExpand.bind(this);
}
onCheck(checked) {
this.setState({ checked });
}
onExpand(expanded) {
this.setState({ expanded });
}
onOrderChange = (orderedNodes) => {
this.setState({
nodes: orderedNodes,
});
}
render() {
const { onOrderChange, state } = this;
const { checked, expanded, nodes } = state;
return (
<CheckboxTree
checked={checked}
expanded={expanded}
iconsClass="fa5"
nodes={nodes}
onCheck={this.onCheck}
onExpand={this.onExpand}
orderable
onOrderChange={onOrderChange}
/>
);
}
}
export default BasicExample;
This is my data.json file
[
{
"value": "polygon",
"label": "Polygon",
"type": "parent",
"children": [
{
"value": "ward",
"label": "Ward",
"type": "fill",
"source": {
"type": "geojson",
"data": "/Ward.json"
},
"id": "ward",
"paint": {
"fill-color": "red",
"fill-opacity": 0.2
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
},
{
"value": "zone",
"label": "Zone",
"type": "fill",
"source": {
"type": "geojson",
"data": "/Zone.json"
},
"id": "zone",
"paint": {
"fill-color": "blue",
"fill-opacity": 0.2
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
}
]
},
{
"value": "line",
"label": "Line",
"type": "parent",
"children": [
{
"value": "path",
"label": "Path",
"type": "parent",
"children": [
{
"value": "roads",
"label": "Roads",
"type": "line",
"source": {
"type": "geojson",
"data": "/Roads.json"
},
"id": "roads",
"paint": {
"line-color": "orange"
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
},
{
"value": "footpaths",
"label": "Footpaths",
"type": "line",
"source": {
"type": "geojson",
"data": "/Footpaths.json"
},
"id": "footpaths",
"paint": {
"line-color": "pink"
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
}
]
},
{
"value": "drainage",
"label": "Drainage",
"type": "parent",
"children": [
{
"value": "waste",
"label": "Waste",
"type": "line",
"source": {
"type": "geojson",
"data": "/Waste.json"
},
"id": "waste",
"paint": {
"line-color": "brown"
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
},
{
"value": "storm",
"label": "Storm",
"type": "line",
"source": {
"type": "geojson",
"data": "/Storm.json"
},
"id": "storm",
"paint": {
"line-color": "green"
},
"layout": {
"visibility": "none"
},
"filter": [
"all"
]
}
]
}
]
}
]
Refer this and go through the code below..
https://olinations.medium.com/10-steps-to-convert-a-react-class-component-to-a-functional-component-with-hooks-ab198e0fa139
import React, { useState } from "react";
import CheckboxTree from "react-checkbox-tree-reorderable";
const nodesData = "./data.json";
const BasicExample = () => {
const [checked, setChecked] = useState("");
const [expanded, setExpand] = useState("");
const [nodes, setOrderNodes] = useState(nodesData);
const onCheck = (checked) => setChecked(checked);
const onExpand = (expanded) => setExpand(expanded);
const onOrderChange = (orderedNodes) => setOrderNodes(orderedNodes);
return (
<CheckboxTree
checked={checked}
expanded={expanded}
iconsClass="fa5"
nodes={nodes}
onCheck={onCheck}
onExpand={onExpand}
orderable
onOrderChange={onOrderChange}
/>
);
};
export default BasicExample;
The code below is working fine and it display record from Monday API.
Here is the outputed JSON record via JSON.stringify()
[ { "id": "3150569213", "name": "Task 1", "column_values": [ { "id": "fullname", "value": null }, { "id": "status", "value": null }, { "id": "email", "value": null }, { "id": "phone_number", "value": null }, { "id": "address", "value": null }, { "id": "product", "value": null }, { "id": "quantity", "value": null }, { "id": "reward", "value": null } ] }, { "id": "3150569636", "name": "Recycle Products Share By ann balling", "column_values": [ { "id": "fullname", "value": "\"ann balling\"" }, { "id": "status", "value": "{\"index\":0}" }, { "id": "email", "value": "{\"text\":\"nancy#gmail.com\",\"email\":\"nancy#gmail.com\",\"changed_at\":\"2022-08-27T12:16:47.728Z\"}" }, { "id": "phone_number", "value": "{\"phone\":\"1234567890\",\"countryShortName\":null}" }, { "id": "address", "value": "{\"lat\":\"Texas,\",\"lng\":\"US\",\"address\":\"unknown\"}" }, { "id": "product", "value": "{\"text\":\"Paper,Bottles,Plastic Cans\"}" }, { "id": "quantity", "value": "\"200\"" }, { "id": "reward", "value": "\"Gift\"" } ] } ]
The property i.column_values[0].value displays record "Nancy More" and I remove the double quotes around it using json.parse() hence JSON.parse(i.column_values[0].value) and its okay.
Here is my issue. The property i.column_values[1].value display record object
{"text":"nancy#gmail.com","email":"nancy#gmail.com","changed_at":"2022-08-27T12:16:47.728Z"}
How do I get email value hence nancy#gmail.com.
Here is the code
import React from "react";
import "./App.css";
import mondaySdk from "monday-sdk-js";
const monday = mondaySdk();
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
datax: [],
};
}
componentDidMount() {
monday.api(`query {boards (ids: 34443234) {items(limit: 3 page: 1) {id name column_values {
id
value
} }}}`).then(res => {
console.log(res);
this.setState({datax: res.data.boards[0].items});
});
}
render() {
const {loading } = this.state;
return (
<div>
<table class="table table-hover">
<thead>
<tr>
<th>Fullname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{this.state.datax.map((i, index) => (
<tr key={index}>
<td>{JSON.parse(i.column_values[0].value)}</td>
<td>{i.column_values[1].value}</td>
</tr>
))}
</tbody>
</table>
{JSON.stringify(this.state.datax, null, 2)}
<br />
</div>
);
}
}
export default App;
The code below is how I got the email address value working
<td>{i.column_values[2].value.split(':')[1].split('"')[1]}</td>
I am trying to display list dynamically when user click on input box. for that I took onChange event handle on input box and setting state to new data when user click on input box. but it is not giving me desired result. can anyone help me to solve the issue ? When user click on input box then only list should be displayed but in my case it's displaying already.
SearchBox.js
import React, { Component } from "react";
import SourceData from "../assets/continents.json";
class SearchBox extends Component {
state = {
value: ""
};
handleChange = e => {
this.setState({
sourceData: SourceData
});
};
render() {
const searhBox = (
<input type="text" value={this.state.value} onClick={this.handleChange} />
);
const selectBox2 = SourceData.map(option => <li>{option.continent}</li>);
return (
<React.Fragment>
<h2>Step 1</h2>
<h3>Select a continent.</h3>
{searhBox}
<ul>{selectBox2}</ul>
</React.Fragment>
);
}
}
export default SearchBox
continents.json
[
{
"continent": "Africa",
"countries": [
{
"name": "Nigeria",
"flag": "ð³ð¬"
},
{
"name": "Ethiopia",
"flag": "ðªð¹"
},
{
"name": "Egypt",
"flag": "ðªð¬"
},
{
"name": "DR Congo",
"flag": "ð¨ð©"
},
{
"name": "South Africa",
"flag": "ð¿ð¦"
}
]
},
{
"continent": "America",
"countries": [
{
"name": "USA",
"flag": "ðºð¸"
},
{
"name": "Brazil",
"flag": "ð§ð·"
},
{
"name": "Mexico",
"flag": "ð²ð½"
},
{
"name": "Colombia",
"flag": "ð¨ð´"
},
{
"name": "Argentina",
"flag": "ð¦ð·"
}
]
},
{
"continent": "Asia",
"countries": [
{
"name": "China",
"flag": "ð¨ð³"
},
{
"name": "India",
"flag": "ð®ð³"
},
{
"name": "Indonesia",
"flag": "ð®ð©"
},
{
"name": "Pakistan",
"flag": "ðµð°"
},
{
"name": "Bangladesh",
"flag": "ð§ð©"
}
]
}
]
output ::
In SearchBox.render, build up the list of countries from this.state.sourceData
const selectBox2 = this.state.sourceData.map(option => <li>{option.continent}</li>);
return (
<React.Fragment>
<h2>Step 1</h2>
<h3>Select a continent.</h3>
{searhBox}
{selectBox2 && <ul>{selectBox2}</ul>}
</React.Fragment>
);
Also, remember to set an initial value for sourceData in SearchBox.state.
state = {
value: '',
sourceData: []
};
i'm trying to figure out how for each item rendered, inside that item i want to get the value of the select menu when i click the button.
i've tried creating a variable inside the render but it's bound to all of the rendered items.
export const products = React.createClass({
getInitialState() {
return {
prods: [
{
"name": "T-Shirt",
"image_full": "550.jpeg",
"image_thumb": "415.jpeg",
"options": [
{
"sku": "TGT-SHIRT-S",
"name": "Small",
"price": 21.95
},
{
"sku": "TGT-SHIRT-M",
"name": "Medium",
"price": 21.95
},
{
"sku": "TGT-SHIRT-L",
"name": "Large",
"price": 21.95
},
{
"sku": "TGT-SHIRT-XL",
"name": "X-Large",
"price": 21.95
},
{
"sku": "TGT-SHIRT-2XL",
"name": "2X-Large",
"price": 23.95
},
{
"sku": "TGT-SHIRT-3XL",
"name": "3X-Large",
"price": 23.95
}
]
},
{
"name": "T-Shirt 2",
"image_full": "550.jpeg",
"image_thumb": "415.jpeg",
"options": [
{
"sku": "TGT-SHIRT-S",
"name": "Small",
"price": 21.95
},
{
"sku": "TGT-SHIRT-M",
"name": "Medium",
"price": 21.95
},
{
"sku": "TGT-SHIRT-L",
"name": "Large",
"price": 21.95
},
{
"sku": "TGT-SHIRT-XL",
"name": "X-Large",
"price": 21.95
},
{
"sku": "TGT-SHIRT-2XL",
"name": "2X-Large",
"price": 23.95
},
{
"sku": "TGT-SHIRT-3XL",
"name": "3X-Large",
"price": 23.95
}
]
}
], cart: []
}
},
render() {
let prodlist = this.state.prods.map(pp => <div className="col-md-2">
<img src={pp.image_full} alt={pp.title} width="100%" />
<select ref="ppt">
<option value="null" selected>Select Option</option>
{pp.options.map(opts => <option value={opts.sku}>{opts.name}</option>)}
</select>
<button className="btn btn-primary btn-block">ADD TO CART</button>
</div>
)
return (
<div>
{prodlist}
</div>
);
}
});
export default products
You can store selected id (or scu in your example) in onChange on select
onChange = (e) => {
this.setState({selectedScu: e.target.value});
}
And get it from the list on button click
options.find(option => option.scu === this.state.selectedScu)