Related
I'm using MDBReact for the creation of a simple data table that has some rows and setMe and getMe buttons. onClick of setMe button I wish to set a value to the cropName state value and onClick of getMe button, I wish to retrieve the update state value.
The problem is that I only receive emptystring values every time inside the getMe function even after updating the state.
I have tried the following code, but unfortunately, it does not seem to update the state value. I only get an emptystring when the getMe button is clicked.
import React, { useState } from 'react';
import { render } from 'react-dom';
import { MDBDataTable } from 'mdbreact';
import './style.css';
import '#fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
function App() {
const [cropName, setCropName] = useState('');
const [data, setData] = useState([]);
function setMe(e) {
console.log(setCropName('Hello'));
}
function getMe(e) {
console.log(cropName);
}
function loadTable() {
setData({
columns: [
{
label: 'Action',
field: 'radio',
sort: 'asc',
width: 150,
},
{
label: 'Position',
field: 'position',
sort: 'asc',
width: 270,
},
{
label: 'Office',
field: 'office',
sort: 'asc',
width: 200,
},
{
label: 'Age',
field: 'age',
sort: 'asc',
width: 100,
},
{
label: 'Start date',
field: 'date',
sort: 'asc',
width: 150,
},
{
label: 'Salary',
field: 'salary',
sort: 'asc',
width: 100,
},
],
rows: [
{
radio: (
<div className="field-input pt-2">
Click this
<button id="asdfsdasafsdf" onClick={setMe}>
set me!
</button>
<button id="asdfsdasafsdf" onClick={getMe}>
get me!
</button>
</div>
),
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320',
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '$170',
},
],
});
}
return (
<div>
<MDBDataTable striped bordered hover data={data} />
<button onClick={loadTable}>Load Table</button>
</div>
);
}
render(<App />, document.getElementById('root'));
Here the live demo of my implementation.
It looks like the state updates are not available to the functions fired from the table row event. I got my way around it by using useEffect statement and setting the dependency as the property that gets modified by the table row event.
import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import { MDBDataTable } from 'mdbreact';
import './style.css';
import '#fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
function App() {
const [cropName, setCropName] = useState('');
const [data, setData] = useState([]);
useEffect(()=>{
console.log('Crop changed')
}, [cropName])
function setMe(e) {
setCropName('Hello ID: '+Math.random());
}
function getMe(e) {
console.log(cropName);
}
function loadTable() {
setData({
columns: [
{
label: 'Action',
field: 'radio',
sort: 'asc',
width: 150,
},
{
label: 'Position',
field: 'position',
sort: 'asc',
width: 270,
},
{
label: 'Office',
field: 'office',
sort: 'asc',
width: 200,
},
{
label: 'Age',
field: 'age',
sort: 'asc',
width: 100,
},
{
label: 'Start date',
field: 'date',
sort: 'asc',
width: 150,
},
{
label: 'Salary',
field: 'salary',
sort: 'asc',
width: 100,
},
],
rows: [
{
radio: (
<div className="field-input pt-2">
Click this
<button id="asdfsdasafsdf" onClick={setMe}>
set me!
</button>
<button id="asdfsdasafsdf" onClick={getMe}>
get me!
</button>
</div>
),
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320',
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '$170',
},
],
});
}
return (
<div>
<MDBDataTable striped bordered hover data={data} />
<button onClick={loadTable}>Load Table</button>
{cropName}
</div>
);
}
render(<App />, document.getElementById('root'));
Demo
I am trying to create a table from ant design react I have copied an example but When I am trying to run it the output is not as expected.
Although I am using the same code can someone tell me what is the problem
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Category 1',
value: 'Category 1',
children: [
{
text: 'Yellow',
value: 'Yellow',
},
{
text: 'Pink',
value: 'Pink',
},
],
},
{
text: 'Category 2',
value: 'Category 2',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
filterMode: 'tree',
filterSearch: true,
onFilter: (value, record) => record.name.includes(value),
width: '30%',
},
{
title: 'Age',
dataIndex: 'age',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
onFilter: (value, record) => record.address.startsWith(value),
filterSearch: true,
width: '40%',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
const onChange = (pagination, filters, sorter, extra) => {
console.log('params', pagination, filters, sorter, extra);
};
const DataTable = () =>{
return(
<div className='data-table'>
<Table columns={columns} dataSource={data} onChange={onChange} bordered/>
</div>
);
};
export default DataTable;
The table was supposed to be:
enter image description here
But the output is:
enter image description here
I was used the same code entered the same components I am unable to understand what the problem is.
It seems that the antd styles were missing. In order to load the styles correctly, add the following line to your index.js file.
import "antd/dist/antd.css";
I'm using antd to create a table which contains chart in cell, just like this html table + chart.js
I tried some tutorials of antd table but failed, here's my codesandbox.
Is there any way or other toolbox to do this ?
You can add couple of packages to achieve the same ( Finished Code sandbox)
"chart.js": "3.4.1",
"react-chartjs-2": "3.0.3",
And then Define the component and use it in the renderer
{
title: "Charts",
render: (chartData) => {
const data = {
labels: ["1", "2", "3", "4", "5", "6"],
datasets: [{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.2)"
}]
};
return <LineChart data = {
data
}
/>;
}
You need to use some kind of chart library to display the chart. Ant Design doesn't provide charts. The famous one for react is https://recharts.org/en-US which internally uses react and d3.
I copied your code from the sandbox and added Bar chart rendering code. This is how your code should look like:
import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Space } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "#ant-design/icons";
import {
BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
const data1 = [
{
name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
},
{
name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
},
{
name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
},
{
name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
},
{
name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
},
{
name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
},
{
name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
},
];
class Example extends PureComponent {
render() {
return (
<BarChart
width={500}
height={300}
data={data1}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
);
}
}
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Joe Black",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Jim Green",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
const chartData = [
{ year: "1991", value: 3 },
{ year: "1992", value: 4 },
{ year: "1993", value: 3.5 },
{ year: "1994", value: 5 },
{ year: "1995", value: 4.9 },
{ year: "1996", value: 6 },
{ year: "1997", value: 7 },
{ year: "1998", value: 9 },
{ year: "1999", value: 13 }
];
class App extends React.Component {
state = {
searchText: "",
searchedColumn: ""
};
getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Input
ref={(node) => {
this.searchInput = node;
}}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() =>
this.handleSearch(selectedKeys, confirm, dataIndex)
}
style={{ marginBottom: 8, display: "block" }}
/>
<Space>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
<Button
onClick={() => this.handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
Reset
</Button>
<Button
type="link"
size="small"
onClick={() => {
confirm({ closeDropdown: false });
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex
});
}}
>
Filter
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
setTimeout(() => this.searchInput.select(), 100);
}
},
render: (text) =>
this.state.searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
)
});
handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex
});
};
handleReset = (clearFilters) => {
clearFilters();
this.setState({ searchText: "" });
};
render() {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "30%",
...this.getColumnSearchProps("name")
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "20%",
...this.getColumnSearchProps("age")
},
{
title: "Address",
dataIndex: "address",
key: "address",
...this.getColumnSearchProps("address"),
sorter: (a, b) => a.address.length - b.address.length,
sortDirections: ["descend", "ascend"]
},
{
title: "Charts",
render: () => (
<>
<Example />
</>
)
}
];
return <Table columns={columns} dataSource={data} />;
}
}
ReactDOM.render(<App />, document.getElementById("container"));
I have used recharts library for Charts.
Here is the Github link for your example: https://github.com/siddharth-sunchu/antd-chart-example
Good Morning,
Is it possible to read an external variable containing a list within the settings of a HighCharts chart for React-Native?
I'm using the component: "react-native-highcharts".
My code:
import ChartView from 'react-native-highcharts';
render() {
this.state.dadosApi = [10, 10, 1, 3, 4, 6, 5, 7, 18, 19, 2, 13];
var exData = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
var Highcharts='Highcharts';
var conf={
chart: {
type: 'line',
animation: Highcharts.svg,
marginRight: 10,
tooltipArr: exData,
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Linha 1',
data: this.state.dadosApi,
marker: {
enabled: false,
},
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}
tooltip:
{
headerFormat: '',
}
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
}
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
The variable "exData" is coming as "undefined". So I can not load in the "tooltip" the value of the hours of each point in the graph.
Is there any way to do this?
I need to load Tooltip values from another list. I load the line with the values from list1. But when I click on the line I want to open a tooltip containing not the value of "line1" but the corresponding value in "list2".
Example: If I click on the "4" position, the value of the line is "6", but I want to show in the tooltip the text of "list2" that is equal to "Test 4".
But the setting says that the value of list2 is empty. How should I proceed to create tooltip this way?
javascript
const tooltips = ['Teste 1','Teste 2','Teste 3','Teste 4','Teste 5','Teste 6','Teste 7','Teste 8','Teste 9','Teste 10','Teste 11','Teste 12'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
},
credits: {
enabled: false
},
series: [{
name: 'Random data',
data: this.state.dataAcionamentos,
marker: {
enabled: false,
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
//showLoading: true,
};
I got it!
My solution just for contribution.
First I create my 2 arrays for the two Series:
for (i in myObj) {
var Label1 = 'Teste 1';
valueP = myObj[i].value;
dataList1.push({
name: Label1,
y: ValueP
});
valueAux1 = myObj[i].value;
valueAux2 = myObj[i].unit;
dataList2.push({
name: valueAux2,
y: valueAux1
});
}
The results:
dataList1 =
[
{ name: 'Teste 1', y: 61.41 },
{ name: 'Teste 1', y: 51.35 },
{ name: 'Teste 1', y: 41.00 },
{ name: 'Teste 1', y: 31.29 },
{ name: 'Teste 1', y: 21.23 },
{ name: 'Teste 1', y: 11.16 },
{ name: 'Teste 1', y: 16.19 },
{ name: 'Teste 1', y: 26.87 },
{ name: 'Teste 1', y: 36.65 },
{ name: 'Teste 1', y: 31.44 },
]
dataList2 =
[
{ name: '1h', y: 61.41 },
{ name: '2h 30m', y: 41.35 },
{ name: '2h 30m', y: 51.00 },
{ name: '22h 30m', y: 36.29 },
{ name: '4h 30m', y: 31.23 },
{ name: '12h 30m', y: 21.16 },
{ name: '4h 30m', y: 18.19 },
{ name: '6h 30m', y: 46.87 },
{ name: '7h 30m', y: 37.65 },
{ name: '9h 30m', y: 30.44 },
]
So I load the graph configuration:
var conf = {
chart: {
type: 'column',
},
title: {
text: null
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(76, 43, 228)']
,
title: {
text: null
},
yAxis: {
title: {
useHTML: true,
text: null
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Bar Chart',
data: dataList1,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.y}</b>'
},
},{
type: 'line',
name: 'Line 1',
data: dataList2,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.name}</b>'
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
In this way the bar chart loads the value {this.series.data.y} in the tooltip and in the line graph loads the value {this.series.data.name}.
For example:
Clicking on position "4" of the bar, loads the value of "31.29" on Tooltip.
Clicking on position "4" of the line, loads the value of "22h 30m" on Tooltip.
Please take a look at the example provided here.
In your case, you defined the config as follows:
var conf = {
chart: {
tooltipArr: exData,
},
series: [{
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}]
}
In your example, you take the tooltip data from:
var toolTip = this.series.chart.options.chart.tooltipArr;
what might quickly result in one of the accessors being undefined. If you want to customise your tooltip based on the values you receive, I would go with the formatter function. You can check, what is the x and y value, using this.x or this.y.
If you know, what do you want to display in tooltips, I would simply declare a const outside conf object and access in inside tooltip formatter function, as the author of the package does.
const tooltips = ['Tooltip1', 'Tooltip2'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
series: [{
name: 'Random data'
}]
}
I am learning app development with React Native using a video tutorial. I have the following issue with this code. I am trying to loop over all elements in the listings array. I am using "map() =>" function to do this, but I keep getting
TypeError: undefined is not a function (evaluating '_listings2.default.map')
The code worked in the video tutorial but does not work with me.
Here is the code I use to loop over the elements:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import SearchBar from '../components/SearchBar';
import Categories from '../components/explore/Categories';
import Listings from '../components/explore/Listings'; // <-- Added from video 14
import colors from '../styles/colors';
import categoriesList from '../data/categories';
import listings from '../data/listings';
export default class InboxContainer extends Component {
static navigationOptions = {
tabBarLabel: 'EXPLORE',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name= {focused ? "ios-home" : "ios-home-outline"}
size= {22}
color= {tintColor}
/>
),
};
renderListings() {
return listings.map((listing, index) => {
return (
<View
key={`listing-${index}`}
>
<Listings
key={`listing-item-${index}`}
title={listing.title}
boldTitle={listing.boldTitle}
listings={listing.listings}
showAddToFav={listing.showAddToFav}
/>
</View>
);
});
}
render() {
return (
<View style={styles.wrapper}>
<SearchBar />
<ScrollView
style={styles.scrollview}
contentContainerStyle={styles.scrollViewContent}
>
<Text style={styles.heading}>Explore Vmap</Text>
<View style={styles.categories}>
<Categories categories={ categoriesList } />
</View>
{this.renderListings()}
</ScrollView>
</View>
);
}
};
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: colors.white,
},
scrollview: {
paddingTop: 100,
},
scrollViewContent: {
paddingBottom: 80,
},
categories: {
},
heading: {
fontSize: 22,
fontWeight: '600',
paddingLeft: 20,
paddingBottom: 20,
//paddingTop: 10,
color: colors.gray04,
},
});
And this is the listings.js file that I use:
const listings = [
{
title: 'Experiences',
boldTitle: false,
showAddToFav: true,
listings: [
{
id: 1,
photo: require('./photos/listing1.png'),
type: 'BOAT RIDE',
title: 'Sail past Japan\'s largest port with a certified skipper',
price: 60,
priceType: 'per person',
stars: 29,
},
{
id: 2,
photo: require('./photos/listing2.png'),
type: 'CHEESE TASTING',
title: 'Funny cheesemonger takes you on a Tour de Fromage',
price: 70,
priceType: 'per person',
stars: 4,
},
{
id: 3,
photo: require('./photos/listing3.png'),
type: 'BIKE RIDE',
title: 'Cycling, "KFC" & Drinking for your Seoul',
price: 47,
priceType: 'per person',
stars: 30,
},
{
id: 4,
photo: require('./photos/listing4.png'),
type: 'BIKE RIDE',
title: 'Cycle through side streets with local',
price: 57,
priceType: 'per person',
stars: 70,
},
{
id: 5,
photo: require('./photos/listing5.png'),
type: 'SURFING',
title: 'Surf Bondi\'s waves, then eat & drink like a local',
price: 61,
priceType: 'per person',
stars: 66,
},
{
id: 6,
photo: require('./photos/listing6.png'),
type: 'DRAWING CLASS',
title: 'A drawing/walking tour in Montmartre',
price: 55,
priceType: 'per person',
stars: 15,
}
]
},
{
title: 'Homes',
boldTitle: false,
showAddToFav: true,
listings: [
{
id: 6,
photo: require('./photos/listing6.png'),
type: 'DRAWING CLASS',
title: 'A drawing/walking tour in Montmartre',
price: 55,
priceType: 'per person',
stars: 15,
},
{
id: 7,
photo: require('./photos/listing7.png'),
type: 'ENTIRE HOUSE - 1 BED',
title: 'BALIAN TREEHOUSE with beautiful pool',
price: 72,
priceType: 'per person',
stars: 101,
},
{
id: 8,
photo: require('./photos/listing8.png'),
type: 'ENTIRE VILLA - 3 BEDS',
title: 'Casa deRio - Beach and Mountains',
price: 69,
priceType: 'per person',
stars: 119,
},
{
id: 9,
photo: require('./photos/listing9.png'),
type: 'ENTIRE HOUSE - 1 BED',
title: 'Cozy A-Frame Cabin in the Redwoods',
price: 152,
priceType: 'per person',
stars: 320,
},
{
id: 10,
photo: require('./photos/listing10.png'),
type: 'ENTIRE GUESTHOUSE - 1 BED',
title: '1880s Carriage House in Curtis Park',
price: 116,
priceType: 'per person',
stars: 300,
},
{
id: 11,
photo: require('./photos/listing11.png'),
type: 'ENTIRE BOAT - 2 BEDS',
title: 'A Pirate\'s Life for Me Houseboar!',
price: 182,
priceType: 'per person',
stars: 132,
}
]
},
{
title: 'Popular Reservatios',
boldTitle: true,
showAddToFav: false,
listings: [
{
id: 12,
photo: require('./photos/listing12.png'),
type: "RESERVATION",
title: 'G\'raj Mahal',
price: '30',
priceTitle: 'per person',
stars: 0,
},
{
id: 13,
photo: require('./photos/listing13.png'),
type: "RESERVATION",
title: 'Le Font',
price: '30',
priceTitle: 'per person',
stars: 0,
},
{
id: 14,
photo: require('./photos/listing14.png'),
type: "RESERVATION",
title: 'The Waiting Room',
price: '34',
priceTitle: 'per person',
stars: 0,
},
{
id: 15,
photo: require('./photos/listing15.png'),
type: "RESERVATION",
title: 'Bar Boulud',
price: '64',
priceTitle: 'per person',
stars: 0,
}
]
}
];
I want to know what is wrong in this code (and the listings.js file)
Edit:
I add all the code that imports the listings.js file.
Using Export Default
At the top of your listing.js file change
const listings = to export default const listings =
and at the top of your InboxContainer file you will need to add:
import listings from '../data/listing.js';
Using Just Export
Another way, which is slightly different is exporting without using the default keyword:
At the top of your listing.js file change
const listings = to export const listings =
and at the top of your InboxContainer file you will need to add:
import { listings } from '../data/listing.js';
You will notice the bracket syntax above, this allows you to import multiple objects from a single file, say if you had multiple listing objects that were each exported you could do something like this:
import { listings1, listing2, listings3 } from '../data/listing.js';