Develop Reference

Show block above another component

Now I have a timer block only above USER 1, how can I display the timer block only above USER 2?
There was a logic to create as many <th> as users, and then add the Timer component to the required <th>, but I can’t figure out how to select the specific <th> in which you need to add Timer
return (
<div className="container">
<table className="table">
<thead className="move">
<th>MOVE</th>
{
[...Array(1)].map((index) => (
<th key={index}>
<Timer minutes={minutes} seconds={seconds} />
</th>
))
}
</thead>
<thead className="thead">
<th className="main">PARAMETERS REQUIREMENTS</th>
{users.map((user) => (
<th className="trade_user" key={user.id}>
{user.name}
</th>
))}
</thead>
<tbody>
<tr>
<td className="main">
Availability of a set of measures that raise quality standards
manufacturing
</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.complexesOfMeasures}
</td>
))}
</tr>
<tr>
<td className="main"> Lot production time, days</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.productionPeriod}
</td>
))}
</tr>
<tr>
<td className="main">Warranty obligations, months</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.warranty}
</td>
))}
</tr>
<tr>
<td className="main">Terms of payment</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.paymentTerms}%
</td>
))}
</tr>
<tr>
<td className="main">The cost of manufacturing a lot</td>
{users.map((user) => (
<td className="trade_user cost" key={user.id}>
{user.cost}
</td>
))}
</tr>
<tr>
<td className="main">Actions:</td>
{users.map((user) => (
<td className="trade_user" key={user.id}>
{user.action}
</td>
))}
</tr>
</tbody>
</table>
</div>
)
Component Timer
import React from "react";
import { CgSandClock } from "react-icons/cg";
export const Timer = ({ minutes, seconds }) => {
return (
<div className="move_time">
<span>{minutes}</span>
<span>:</span>
<span>{seconds}</span>
<div>
<CgSandClock size="1.5em" className="move_item_clock" />
</div>
</div>
);
};

map over the users to create the <th> elements as well.
<thead className="move">
{users.map(user => <th key={user.id}>{user.id===2?<Timer minutes={minutes} seconds={seconds}/>:"MOVE"}</th>)}
</thead>

Add items in different tables in react?

Here is my code :
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{
tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
<table className="item" class="auto-index" >
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{
buyItems.map(item => {
return(
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);
I want to add different items in different tables but items are duplicated in all table please help me guys. I am not so good at this java script so please you can help me by telling me how to post different item in the multiple table.

declare a store add put your list in it and send this store to all of your components which you want to use the list then just add items to your list and your tables all updated with new data or create master component which it has a state (your list) and pass via props to all of your components, if you have one component and multiple tables you can add the list in your state and add items with setState function and use it in your tables
Example :
--store
export class YourStore{
#computed get yourRows(){
return this.yourlList.map(item => {
return (
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
#observable yourList = []
#action addItemToList(data){
this.yourList.push(data)
}
}
--component render
<table>
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{this.props.yourstore.yourRows}
</tbody>
</table>

Is this what your expectation? The below code will render a table for each item in the buyItems
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
{buyItems.map(item => (
<table className="item" class="auto-index" >
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">1</td>
</tr>
</tbody>
</table>
))}
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);

failed to compile unexpected token 57:1 Return(

i have a stubornly persistent syntax error that i cant solve for over an hour , it sais failed to compile unexpected token 57:1 Return(
im still a noob in react so sorry if im asking a stupid question , but i cant seem to figure out the issue. Any help is greatly appreciated thanks!!!
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Car from './car';
import { CarsRef, timeRef } from '../admin/reference';
import { Table, Row, Col } from 'reactstrap';
import Icon from 'react-icons-kit';
import { bin } from 'react-icons-kit/icomoon';
import { Link } from 'react-router-dom';
class CarsList extends Component {
state = {
Cars: [],
Carsloading: true
};
componentWillMount() {
CarsRef.on('value', snap => {
const tasks = [];
let Cars = []
snap.forEach(shot => {
Cars.push({ ...shot.val(), key: shot.key });
});
console.log(Cars);
this.setState({ Cars: Cars, CarsLoading: false });
});
}
render(){
const { Cars, CarsLoading } = this.state;
const orderedcars = Cars;
let carList;
if (CarsLoading) {
carList = <div className="TaskList-empty">Loading...</div>;
}
else if (Cars.length) {
carList = (
<ul className="TaskList">
{Cars.map(car => (
return (
<div>
<Row>
<Col md="12">
<div className="card border-secondary mb-3">
<div className="card-header text-success">
<h4>
<Link to={`/cars/${car.id}`}>
{car.year} {car.make} {car.model} {car.trim}
</Link>
</h4>
</div>
<div className="card-body">
<Row>
<Col md="5">
<CardImg className="carlist-margin" top width="100%" src={car.link} alt={car.make} />
</Col>
<Col md="4">
<Table className="striped">
<tbody>
<tr>
<td>Engine:</td>
<td>{car.engine}</td>
</tr>
<tr>
<td>Drive Type:</td>
<td>{car.drive_type}</td>
</tr>
<tr>
<td>Body:</td>
<td>{car.body_type}</td>
</tr>
<tr>
<td>Exterior Color:</td>
<td>{car.ext_color}</td>
</tr>
<tr>
<td>Interior Color:</td>
<td>{car.int_color}</td>
</tr>
<tr>
<td>Transmission:</td>
<td>{car.transmission}</td>
</tr>
<tr>
<td>VIN:</td>
<td>{car.vin}</td>
</tr>
</tbody>
</Table>
</Col>
<Col md="3">
<Table className="striped">
<tbody>
<tr>
<td className="text-primary text-right">
<strong>
MSRP:
</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price}
</strong>
</td>
</tr>
<tr>
<td className="text-danger text-right">Dealer Discount:</td>
<td className="text-danger text-right">{car.sale}%</td>
</tr>
<tr>
<td className="text-primary text-right">
<strong>
Total:
</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price-car.price*car.sale/100}
</strong>
</td>
</tr>
<tr>
<td className="text-primary text-right">Est. Lease:</td>
<td className="text-primary text-right">$230/m*</td>
</tr>
<tr>
<td className="text-primary text-right">Est. Finance:</td>
<td className="text-primary text-right">$330/m*</td>
</tr>
<tr>
<td className="text-right"></td>
<td className="text-right">
<Link to={`/cars/${car.id}`}>
<Button className="btn btn-success">More</Button>
</Link>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
</div>
))}
);
};
}
export default Car;

You have an arrow function car => ( ... ) without a function body {}, so you don't need the return statement since the JSX will be returned implicitly.
Also make sure that you return carList from the render method, or there will be nothing to render for this component.
class CarsList extends Component {
// ...
render() {
const { Cars, CarsLoading } = this.state;
const orderedcars = Cars;
let carList;
if (CarsLoading) {
carList = <div className="TaskList-empty">Loading...</div>;
} else {
carList = (
<ul className="TaskList">
{Cars.map(car => (
<div>
<Row>
<Col md="12">
<div className="card border-secondary mb-3">
<div className="card-header text-success">
<h4>
<Link to={`/cars/${car.id}`}>
{car.year} {car.make} {car.model} {car.trim}
</Link>
</h4>
</div>
<div className="card-body">
<Row>
<Col md="5">
<CardImg
className="carlist-margin"
top
width="100%"
src={car.link}
alt={car.make}
/>
</Col>
<Col md="4">
<Table className="striped">
<tbody>
<tr>
<td>Engine:</td>
<td>{car.engine}</td>
</tr>
<tr>
<td>Drive Type:</td>
<td>{car.drive_type}</td>
</tr>
<tr>
<td>Body:</td>
<td>{car.body_type}</td>
</tr>
<tr>
<td>Exterior Color:</td>
<td>{car.ext_color}</td>
</tr>
<tr>
<td>Interior Color:</td>
<td>{car.int_color}</td>
</tr>
<tr>
<td>Transmission:</td>
<td>{car.transmission}</td>
</tr>
<tr>
<td>VIN:</td>
<td>{car.vin}</td>
</tr>
</tbody>
</Table>
</Col>
<Col md="3">
<Table className="striped">
<tbody>
<tr>
<td className="text-primary text-right">
<strong>MSRP:</strong>
</td>
<td className="text-primary text-right">
<strong>${car.price}</strong>
</td>
</tr>
<tr>
<td className="text-danger text-right">
Dealer Discount:
</td>
<td className="text-danger text-right">
{car.sale}%
</td>
</tr>
<tr>
<td className="text-primary text-right">
<strong>Total:</strong>
</td>
<td className="text-primary text-right">
<strong>
${car.price - (car.price * car.sale) / 100}
</strong>
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Lease:
</td>
<td className="text-primary text-right">
$230/m*
</td>
</tr>
<tr>
<td className="text-primary text-right">
Est. Finance:
</td>
<td className="text-primary text-right">
$330/m*
</td>
</tr>
<tr>
<td className="text-right" />
<td className="text-right">
<Link to={`/cars/${car.id}`}>
<Button className="btn btn-success">
More
</Button>
</Link>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
))}
</ul>
);
}
return carList;
}
}

how to display table rows in ReactJS using Map function

I am using ReactJS to display a table. The rows of this table are fetched from the database. I can get only row to show but adding an additional {object.title} returns an error that object is not defined. Here is my code:
tabRow(){
if(this.state.products instanceof Array){
const roles = this.state.products.map((object, i) =>
<td>{object.id}</td>,
<td>{object.title}</td>
);
return (
<tr>{roles}</tr>
);
}
}
render(){
return (
<div>
<h1>Products</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Product</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Product Title</td>
<td>Product Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
{console.log(this.tabRow())}
</tbody>
</table>
</div>
)
}

Render a table in the rows of another table in react

I want to create something like this in react:
I create a renderTable and a renderInside function. Inside renderTable I call renderInside like this:
const renderInside = (slipsList) => {
if (slipsList) {
return (
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Symbol
</span>
</div>
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)}
</tbody>
</table>
);
}
return (
<div>Loading...</div>
);
};
and the renderTable is like this:
const renderTable = (slipsList) => {
if (slipsList) {
return (
<div className="table-scrollable-container">
<div className="table-scrollable">
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Date Valeur
</span>
</div>
<div className="table__header__arrow" />
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
return (
<div>Loading...</div>
);
};
But it doesn't work. I use another two ways of doing this but I want. For every row or the main table I must put the secondary table. Any ideas of how to do this?

Try to Use this:
In renderInside method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)
)}
In renderTable method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)
)}
One more thing, i think you need to pass slip inside {renderInside(slipsList)} method instead of slipsList.