.map() function and deleting a row from a table with ReactJS

.map() function and deleting a row from a table with ReactJS - javascript

I'm having a problem wrapping my head around the .map() function as it relates to ReactJS. In practice, I have a table onto which I can add rows, but deleting a row by passing the index of the row is just not working. Here's what I have; can anyone clear up what I'm doing wrong?
import React from 'react';
import { render } from 'react-dom';
class CommentList extends React.Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
this.handleCommentDelete = this.handleCommentDelete.bind(this);
}
handleCommentDelete(i) {
alert('i = ' + i);
let comments = [...this.state.comments];
comments.splice(i, 1);
this.setState({
comments: comments
});
}
render() {
return (
<table className="commentList">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{
this.props.data.map((comment, i) => {
return (
<tr className="comment" key={i}>
<td className="commentId">{comment.Id}</td>
<td className="commentName">{comment.Name}</td>
<td className="commentPhone">{comment.Phone}</td>
<td className="commentEmail">{comment.Email}</td>
<td className="commentCRUD">
<a onClick={(i) => this.handleCommentDelete(i)}>
<i className="fa fa-trash" />
</a>
</td>
</tr>
);
})
}
</tbody>
</table>
);
}
}
export default CommentList;
Thanks in advance!

You are passing the index i, not the right way. Also i would prefer to pass id rather than index. Here is how you can do that:
import React from 'react';
import { render } from 'react-dom';
class CommentList extends React.Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
this.handleCommentDelete = this.handleCommentDelete.bind(this);
}
handleCommentDelete(id) {
let comments = this.state.comments.filter(comment => comment.id !== id);
this.setState({
comments: comments
});
}
render() {
return (
<table className="commentList">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{
this.props.data.map(comment => {
return (
<tr className="comment" key={comment.Id}>
<td className="commentId">{comment.Id}</td>
<td className="commentName">{comment.Name}</td>
<td className="commentPhone">{comment.Phone}</td>
<td className="commentEmail">{comment.Email}</td>
<td className="commentCRUD">
<a onClick={() => this.handleCommentDelete(comment.Id)}>
<i className="fa fa-trash" />
</a>
</td>
</tr>
);
})
}
</tbody>
</table>
);
}
}
export default CommentList;
Hope this works for you.

Related

load the data dynamically by id on button click in ReactJS

import React,{Component} from 'react'
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: [],
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
componentDidUpdate(){
this.fetchdata();
}
fetchdata=()=>{
fetch("https://jsonplaceholder.typicode.com/users/:id")
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json.data,
});
});
}
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{this.state.data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={this.fetchdata.bind(this, data)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{this.state.fetchdata.map((fetchdata, index) => (
<tr key={index}>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
))}
;
</tbody>
</table>
</div>
</div>
);
}
}
export default Todo
This is my code I want to load data on button click but I am getting an error: "Cannot read properties of undefined (reading 'map') ". I am new to react js and don't know how to do it. The data is not getting loaded in the below table on button click by id. The first table data is loading correctly.

There were few issues
id was not passed as a param to fetchdata
respnse data was JSON not an Array
DO NOT call any function in componentDidUpdate without checking prev state. There was an infinite loop calling the API.
No need to bind fetchdata function as it is an arrow function.
import React, { Component } from "react";
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: []
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json
});
});
}
fetchdata = (id) => {
console.log(id);
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then((res) => res.json())
.then((json) => {
console.log(json);
this.setState({
fetchdata: json
});
});
};
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{this.state.data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={() => this.fetchdata(data.id)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{this.state.fetchdata && (
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
}
export default Todo;
Sandbox code => https://codesandbox.io/s/pensive-parm-c0l54?file=/src/App.js:0-2277

If you are new to react i highly recommend you to use hooks, but there are several things you can do in your Code:
1-Fetch data(you need id i Think, so):
fetchdata=(id)=>{
fetch(https://jsonplaceholder.typicode.com/users/${id})
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json.data,
});
});
}
This Way you pass the id by arguments.
2- onClick función:
View
As you Will need the id to pass it to the fetch función. No need bina with fan Arrow function
3- This is the Code i suggest for hooks:
import React, {useState, useEffect} from "react";
const Todo = () => {
const [data, setData] = useState([])
const [fetchdata,setFetchdata] = useState([])
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
setData(json);
});
},[])
const fetchdataById = (id) => {
console.log(id);
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then((res) => res.json())
.then((json) => {
console.log(json);
setFetchdata(json)
});
};
return (
<div>
<div className="Todos row g-3">
<table class="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{data.map((data, index) => (
<tr key={index}>
<th scope="row">{data.id}</th>
<td>{data.title}</td>
<td>{data.completed}</td>
<td>
<button onClick={() => fetchdataById(data.id)}>
View
</button>
</td>
</tr>
))}
;
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
{fetchdata && (
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
export default Todo;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Something like this should Work,

here's what you can do:
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
fetchdata: {}
};
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json
});
});
}
fetchdata = (todo) => {
fetch("https://jsonplaceholder.typicode.com/users/" + todo.id)
.then((res) => res.json())
.then((json) => {
this.setState({
fetchdata: json
});
});
};
render() {
const { data, fetchdata } = this.state;
return (
<div>
<div className="Todos row g-3">
<table className="table col-auto">
<thead>
<tr>
<th scope="col">Todo</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{data.map((todo, index) => (
<tr key={index}>
<th scope="row">{todo.id}</th>
<td>{todo.title}</td>
<td>{todo.completed}</td>
<td>
<button onClick={() => this.fetchdata(todo)}>View</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="show-data col-auto">
<table className="table table-striped">
<thead>
<tr>
<th scope="col">Todo_Id</th>
<th scope="col">Todo_title</th>
<th scope="col">User_id</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{fetchdata.id}</th>
<td>{fetchdata.name}</td>
<td>{fetchdata.email}</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
}
ReactDOM.render(
<Todo />,
document.body
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

React JS - How do I optimize render code?

I have this code in my render function, but I have 5 different versions with minor html changes. I made new tables with each of the 5. How would I optimize it so I do not have to repeat a lot of html/js code?
<table>
<thead>
<tr>
<th></th>
<th className='desc-col'>Description</th>
<th className='button-col'>Amount</th>
</tr>
</thead>
<tbody> { this.showData
this.state.data.map((exp) => {
if (exp.typeOfItem === "Asset" && exp.term == "Short-Term" ) {
return <tr>
<td className='counterCell'></td>
<td className='desc-col'>{exp.description}</td>
<td className='button-col'>${exp.amount}</td>
<td className='button-col'>
<Update expense={exp} />
</td>
<td className='button-col'>
<Delete expense={exp} />
</td>
</tr>
}
})
}
</tbody>
</table>
<table>
<thead>
<tr>
<th></th>
<th className='desc-col'>Description</th>
<th className='button-col'>Amount</th>
</tr>
</thead>
<tbody>
{
this.state.data.map((exp) => {
if (exp.typeOfItem === "Asset" && exp.term == "Long-Term" ) {
return <tr>
<td className='counterCell'></td>
<td className='desc-col'>{exp.description}</td>
<td className='button-col'>${exp.amount}</td>
<td className='button-col'>
<Update expense={exp} />
</td>
<td className='button-col'>
<Delete expense={exp} />
</td>
</tr>
}
})
}
</tbody>
</table>

You can pull out your Table in a custom component and pass down the data as props,
Your new component would be,
import React from 'react'
const TableComponent = (props) => (
<table>
<thead>
<tr>
<th></th><th className='desc-col'>Description</th>
<th className='button-col'>Amount</th>
</tr>
</thead>
<tbody>
{
props.data.map((exp) => {
if (exp.typeOfItem === props.typeOfItem && exp.term === props.term ) {
return <tr>
<td className='counterCell'></td>
<td className='desc-col'>{exp.description}</td>
<td className='button-col'>${exp.amount}</td>
<td className='button-col'> <Update expense={exp}/></td>
<td className='button-col'><Delete expense={exp} /></td>
</tr>
}
})
}
</tbody>
</table>
)
export default TableComponent
Now you can render this component by passing props,
<TableComponent data={this.state.data} typeOfItem="Asset" term="Short-Term"/>
<TableComponent data={this.state.data} typeOfItem="Asset" term="Long-Term"/>
Note: If you have any other variable's to be used in Table, do pass them as props and in your TableComponent use them appropriately.

You would be better off splitting the array before the render.
for instance:
const assets = this.state.data.filter(item => item.typeOfItem === "Asset");
const longTerm = [];
const shortTerm = [];
assets.forEach((asset) => {
asset.term = "long" ? longTerm.push(asset) : shortTerm.push(asset);
});
Next you can render it with a component you want
longTerm.map(asset => {
return <MyComponent amount={asset.amount} ... />
})
shortTerm.map(asset => {
return <MyComponent amount={asset.amount} ... />
})
And your component could be
function MyComponent(props) {
return <tr>
<td className='counterCell'></td>
<td className='desc-col'>{props.description}</td>
//rest
</tr>
}
additionally you could make a table component and pass it the collection which calls MyComponent
function TableComponent({collection}) {
return <table>
<thead>
<tr>
<th></th><th className='desc-col'>Description</th>
<th className='button-col'>Amount</th>
</tr>
</thead>
<tbody>
{
collection.map(asset => {
return <MyComponent ....
});
}
</tbody>
</table>
}
and then the initial render would just be
<>
<TableComponent collection={longterm} />
<TableComponent collection={shortterm} />
</>

DataTable is show an error "No data available in table"

I had used DataTable component for my userlist to display the data stored in my database.
This is my global.js file
import React, { Component } from 'react';
import $ from 'jquery';
import DataTable from 'datatables.net';
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
$(document).ready(function() {
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
} );
class Global extends React.Component {
constructor(props){
super(props);
this.state={
users:[],
isLoaded:false,
errorOnLoad:false
};
}
getuser(){
fetch('/api/users/getuser',{
method:'get'
})
.then((response)=>{
return response.json()
})
.then((data)=>{
this.setState({
users:data,
isLoaded:true,
err:{},
errorOnLoad:false,
});
this.getuser.bind();
})
.catch((err)=>{
this.setState({
err:err,
errorOnLoad:true
})
})
}
componentDidMount(){
this.getuser();
}
render() {
return (
<div>
<h2 className="contact-table">CONTACT LIST</h2>
<table>
<tbody>
<tr id="filter_global" style={{display: 'flex', justifyContent: 'flex-end'}}>
<td style={{width: '100px', alignSelf: 'center'}}>Global search</td>
<td align="center"><input type="text" className="global_filter" id="global_filter" style={{width: 'auto',border: '1px solid',marginBottom: '0px'}} /></td>
</tr>
</tbody>
</table>
<table id="example" className="display" style={{width: '100%'}}>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Message</th>
<th>Profile Photo</th>
</tr>
</thead>
<tbody>
{
this.state.users.map((user)=>(
<tr key={user.qid}>
<td>{user.name}</td>
<td>{user.emailAddress}</td>
<td>{user.mobileNumber}</td>
<td>{user.message}</td>
<td><img className="image-db" src={user.image} alt="" /></td>
</tr>
))
}
</tbody>
</table>
</div>
);
}
}
export default Global;
This is the displaying page when i open it. After refreshing the page or adding new data to the table error occuring.
When i am refreshing the page data Table is not working and displaying error.
But i am getting all the data & an error that No data available in table
Can anyone tell me what went wrong.
Thankyou.

when i see in the browser it first shows unavialbe for few seconds

i am new to react js
i have several if else conditions
when its undefined it should display unavailable
when it has values it should display the values.
right now when i see in the browser it first shows unavialbe for few seconds and then shows the values.
can you guys tell me how to fix it.
providing the code below
import React from 'react';
import {connect} from 'react-redux';
import {sportsPrice} from '../../common/mixin-money-format';
import {sportsWeather} from '../../common/services';
import {showError} from '../../../redux/common/error/error-actions';
import {sportsMoneyLaunched} from '../../../util/build-link-urls';
import SportsKING from 'Sports-KING';
const SportsKING = new SportsKING();
const BALLContribution = React.createClass({
// WILL BE REMOVED ONCE THE GOAL TRACKER SERVICE IS READY
propTypes: {
encId: React.PropTypes.string.isRequired,
onEdit: React.PropTypes.func.isRequired,
showGlobalError: React.PropTypes.func.isRequired
},
getInitialState() {
return {
sportsPerson: {'SportsChampionsYearToDateContributions': 0.0,
'SportsYearToDateContributions': 0.0},
error: null
};
},
componentDidMount() {
if (this.props.encId) {
sportsWeather(this.props.encId)
.then(
(response) => {
const sportsPerson = response.data;
// todo should move this to the redux store
this.setState({sportsPerson});
}, (error) => {
this.setState({error});
this.props.showGlobalError();
SportsKING.error(error, 'Error retrieving BALL contribution details.');
}
);
}
},
componentWillReceiveProps(nextProps) {
const {encId} = nextProps;
if (encId && encId.length > 0 && encId !== this.props.encId) {
sportsWeather(this.props.encId)
.then((response) => {
const sportsPerson = response.data;
// todo should move this to the redux store
this.setState({sportsPerson});
})
.catch((error) => {
this.setState({error});
nextProps.showGlobalError();
SportsKING.error(error, 'Error retrieving BALL contribution details.');
});
}
},
editHandler() {
this.props.onEdit();
},
render() {
let tile;
if (this.state.error) {
tile = (
<div className="content-box sports-light">
<div className="info-section">
<p className="negative text-center">Account Information Unavailable</p>
</div>
</div>
);
} else if (this.state.sportsPerson.SportsYear === undefined && this.state.sportsPerson.SportsChampionsYear === undefined) {
tile = (
<div className="data-box sports-light">
<table className="sports-drinking">
<tbody>
<tr>
<th scope="bottle">Current Year</th>
<td className="errorRed">Unavailable</td>
</tr>
<tr>
<th scope="bottle">Prior Year</th>
<td className="errorRed">Unavailable</td>
</tr>
</tbody>
</table>
<ul className="link-list secondary-links">
<li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
</ul>
</div>
);
} else if (this.state.sportsPerson.SportsYear === undefined) {
tile = (
<div className="data-box sports-light">
<table className="sports-drinking">
<tbody>
<tr>
<th scope="bottle">Current Year ({ (this.state.sportsPerson.SportsChampionsYear) + 1 })</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
</tr>
<tr>
<th scope="bottle">Prior Year ({this.state.sportsPerson.SportsChampionsYear})</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
</tr>
</tbody>
</table>
<ul className="link-list secondary-links">
<li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
</ul>
</div>
);
} else if (this.state.sportsPerson.SportsChampionsYear === undefined) {
tile = (
<div className="data-box sports-light">
<table className="sports-drinking">
<tbody>
<tr>
<th scope="bottle">Current Year ({(this.state.sportsPerson.SportsYear)})</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
</tr>
<tr>
<th scope="bottle">Prior Year ({ (this.state.sportsPerson.SportsYear) - 1 })</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
</tr>
</tbody>
</table>
<ul className="link-list secondary-links">
<li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
</ul>
</div>
);
} else {
tile = (
<div className="data-box sports-light">
<table className="sports-drinking">
<tbody>
<tr>
<th scope="bottle">Current Year ({this.state.sportsPerson.SportsYear})</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsYearToDateContributions))}</td>
</tr>
<tr>
<th scope="bottle">Prior Year ({this.state.sportsPerson.SportsChampionsYear})</th>
<td>{sportsPrice(parseFloat(this.state.sportsPerson.SportsChampionsYearToDateContributions))}</td>
</tr>
</tbody>
</table>
<ul className="link-list secondary-links">
<li><a href="javascript:;" onClick={sportsMoneyLaunched}>Make a Contribution</a></li>
</ul>
</div>
);
}
return (
<section className="gray-box page-top">
<h2>BALL Contributions</h2>
<div className="flex-container flex-1">
<div className="flex-item half-item">
{tile}
</div>
</div>
</section>
);
}
});
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => {
return {
showGlobalError() {
dispatch(showError());
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(BALLContribution);

How to properly write a React Class Component that can receive props?

I know how to receive props in presentational components but currently I need to also use functions which have logic therefore I'm needed to change my component into a Class Component right now, I don't know why I'm not able to receive the props.
Here is a part of my component:
class MemberInfoSubPage extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.renderRow = this.renderRow.bind(this);
}
As you can see, I'm using ES6 & I'm trying to render rows from a map but for now I'm just trying to receive props. Is this code provided correct? I mean the usual syntax.
PS: For additional info, I'm receiving 'props' is not defined. So yea, I'm not receiving the props after changing my component. Previously I was able to receive the props.
EDIT:
import React, {PropTypes} from 'react';
import ons from 'onsenui';
import * as Ons from 'react-onsenui';
class MemberInfoSubPage extends React.Component {
//const result = FlightApi.getAllFlightList();
constructor(props) {
super(props);
this.state = {
};
// this.stateToEntry = this.stateToEntry.bind(this);
this.renderRow = this.renderRow.bind(this);
}
renderRow(row,index) {
const x = 40 + Math.round(5 * (Math.random() - 0.5)),
y = 40 + Math.round(5 * (Math.random() - 0.5));
const names = ['Max', 'Chloe', 'Bella', 'Oliver', 'Tiger', 'Lucy', 'Shadow', 'Angel'];
const name = names[Math.floor(names.length * Math.random())];
return (
<Ons.ListItem key={index}>
<div className='left'>
<img src={`http://placekitten.com/g/${x}/${y}`} className='list__item__thumbnail' />
</div>
<div className='center'>
{name}
</div>
</Ons.ListItem>
);
}
render() {
if (props['index'] == 0) {
return (
<div className="memberInfoSubPage">
<div className="memberInfoSubPage-row1">
<span>{props['data-user'].id}</span>
<table border={1} className="memberInfoSubPage-Table">
<tr>
<th style={{color: 'grey'}}>Rank</th>
<th style={{color: 'grey'}}>Country</th>
</tr>
<tr>
<td>{props['data-user'].rank}</td>
<td>{props['data-user'].country}</td>
</tr>
</table>
</div>
<div>
<div className="memberInfoSubPage2-Summary-Title">Placement Performance Summary</div>
<table border={1} className="memberInfoSubPage-Table2">
<tr>
<td>L</td>
<td>R</td>
</tr>
<tr>
<td>{props['data-user'].placementPerformanceSummary.L}</td>
<td>{props['data-user'].placementPerformanceSummary.R}</td>
</tr>
</table>
</div>
<div>
<div className="memberInfoSubPage2-Summary-Title">Today Detail</div>
<table border={1} className="memberInfoSubPage-Table3">
<tr>
<td>L</td>
<td>R</td>
</tr>
<tr>
<td>{props['data-user'].todayDetail.L}</td>
<td>{props['data-user'].todayDetail.R}</td>
</tr>
</table>
</div>
<div> <table border={1} className="memberInfoSubPage-Table3">
<tr><th style={{color: 'grey'}}>Next Level Upgrade</th></tr>
<tr>
<td>{props['data-user'].nextLevelUpgrade}</td>
</tr>
</table>
</div>
<Ons.Button style={{margin: '6px'}}>Instant Upgrade</Ons.Button>
<div>
<div className="memberInfoSubPage2-Summary-Title" style={{color: 'grey'}}>Conversion Share Platform Portfolio</div>
<table border={1} className="memberInfoSubPage-Table3">
<tr style={{color: 'grey'}}>
<th>Market($)</th>
<th>Unit</th>
<th>Tradable Unit</th>
</tr>
<tr>
<td>{props['data-user'].market}</td>
<td>{props['data-user'].unit}</td>
<td>{props['data-user'].tradableUnit}</td>
</tr>
</table>
</div>
<div><table border={1} className="memberInfoSubPage-Table3">
<tr style={{color: 'grey'}}>
<th>Lock Units</th>
<th>Avg Price</th>
<th>Last Price</th>
</tr>
<tr>
<td>{props['data-user'].lockUnits}</td>
<td>{props['data-user'].avgPrice}</td>
<td>{props['data-user'].lastPrice}</td>
</tr>
</table>
</div>
</div>
);
}
else if (props['index'] == 1) {
return (
<Ons.List
dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
renderRow={this.renderRow}
renderHeader={() => <Ons.ListHeader>Summary</Ons.ListHeader>}/>
/*<div className="memberInfoSubPage2-Summary-Title">Summary</div>
<table className="memberInfoSubPage2-Summary-Table">
<tr><td>Credit</td><td>{props['data-user'].summary.credit}</td></tr>
<tr><td>Register</td><td>{props['data-user'].summary.register}</td></tr>
<tr><td>CP(S)</td><td>{props['data-user'].summary.cpS}</td></tr>
<tr><td>CP(0)</td><td>{props['data-user'].summary.cp0}</td></tr>
<tr><td>AP</td><td>{props['data-user'].summary.ap}</td></tr>
<tr><td>BO Point</td><td>{props['data-user'].summary.boPoint}</td></tr>
<tr><td>Listed Company Fund</td><td>{props['data-user'].summary.listedCompanyFund}</td></tr>
<tr><td>Promo</td><td>{props['data-user'].summary.promo}</td></tr>
<tr><td>TT</td><td>{props['data-user'].summary.tt}</td></tr>
<tr><td>Re-Entry Point</td><td>{props['data-user'].summary.reEntryPoint}</td></tr>
</table>*/
);
}
else {
return (
<p>Not receiving any index. No content can be shown.</p>
);
}
}
};
MemberInfoSubPage.propTypes = {
'data-pageName': PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
'defaultOption': PropTypes.string,
value: PropTypes.string,
'error': PropTypes.string,
'options': PropTypes.arrayOf(PropTypes.object)
};
export default MemberInfoSubPage;
Here is my code, I'm pretty sure I've missed something.
There is still a lot of unrefined code and the function renderRow & that Onsen list is copy pasted.

props is on the component instance, so you'll need to refer to it as this.props rather than just props in your render function.

We Keep Coding

JavaScript is the programming language of the Web.

.map() function and deleting a row from a table with ReactJS - javascript

Related

load the data dynamically by id on button click in ReactJS

React JS - How do I optimize render code?

DataTable is show an error "No data available in table"

when i see in the browser it first shows unavialbe for few seconds

How to properly write a React Class Component that can receive props?

Categories

Resources