Show block above another component - javascript

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>

Related

Typescript pass mapped element to Function onclick

I am at the beginning stage of a Typescript application, and as a proof of concept I wish to simply alert the ID of each item on a button click. How can I add item.ID to the onclick Alert function below?
<table style="background-color:#FFFFFF;width:100px;">
{resolvedValue.map((item, index) => (
<tr key={index}>
<td>
{item.id}
</td>
<td>
<button onclick="javascript:alert('Adding {item.id} ');">Add</button>
</td>
</tr>
))}
</table>
Update following answer:
<table style="background-color:#FFFFFF;width:100px;">
{resolvedValue.map((item, index) => (
<tr key={index}>
<td>
{item.id}
</td>
<td>
<button onClick={() => alert('Adding')}>Add</button>
</td>
</tr>
))}
</table>

Just use React's onClick function. See https://codesandbox.io/s/keen-driscoll-mx8dy
<table style={{ "background-color": "#FFFFFF", "width": "100px" }}>
{resolvedValue.map((item, index) => (
<tr key={index}>
<td>
{item.id}
</td>
<td>
<button onClick={() => alert('Adding' + item.id)}>Add</button>
</td>
</tr>
))}
</table>

Not able to render table of results properly in React

Options.js
return (
<div>
<Table bordered hover variant="light">
<caption>Data Inspector Results</caption>
<thead className="thead-dark">
<tr>
<th>Attribute</th>
<th>Datatype</th>
<th>Categorical/Numerical</th>
<th>Sample Data</th>
<th>Null Values</th>
<th>Numerical Range</th>
<th>Bin Size</th>
<th>Unique Key</th>
</tr>
</thead>
<tbody>
{result}
{result}
</tbody>
</Table>
</div>
)
Result.js
return (
<div>
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
</div>
)
I'm trying to render multiple of my result component within Options.js. However, I'm facing this issue where my results are not displaying properly in the table.
This image shows my issues
The props aren't the issue nor the JSON that I'm feeding in. I can't seem to render this table nicely. What am I doing wrong? Thank you in advance!

Can you just update your files like this and check again
Options.js
return (
<Table bordered hover variant="light">
<caption>Data Inspector Results</caption>
<thead className="thead-dark">
<tr>
<th>Attribute</th>
<th>Datatype</th>
<th>Categorical/Numerical</th>
<th>Sample Data</th>
<th>Null Values</th>
<th>Numerical Range</th>
<th>Bin Size</th>
<th>Unique Key</th>
</tr>
</thead>
{result}
{result}
</Table>
)
Result.js
return (
<tbody>
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
</tbody>)

You are wrapping result inside a div you should un-wrap it and leave as a tr.
return (
<tr>
<td>{props.attribute}</td>
<td>{props.dataType}</td>
<td>
<Select options={categoryOptions} />
</td>
<td>To Be Done In The Future</td>
<td>
<Select
defaultValue={[]}
isMulti
name="colors"
options={nullBinOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
</td>
<td>{props.numericalRange}</td>
<td>{props.binSize}</td>
<td>NA</td>
</tr>
)
Using chrome-dev-tools are you able to share an image of the html tree?
About TABLE elements: It's very important that the immediate structure are the expected elements (TBODY, THEAD, TR, TD, TH) as tables are very rigid structures and putting elements such as DIV where the DOM expects a TD for example put's it in "quirk" mode and layout will probable misbehave. https://css-tricks.com/using-divs-inside-tables/

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;
}
}

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.

Fit table inside modal element Bootstrap

I have modal styled with .modal .modal-dialog { width: 80%; }, and I'm trying to fit table-responsive table to fill modal body vertically. Table has only one column, that means it has to change row height in this case I guess (table with responsive row height). Modal created with React-Bootstrap.
Update modal code:
var ModalView = React.createClass({
getInitialState: function(){
return { showModal: false, tableView: false, image: [] };
},
loadDataFromServer: function() {
$.getJSON(this.props.url,{id: this.props.id},
function(data) {
this.setState({image: data});
}.bind(this)
);
},
close: function(){
this.setState({ showModal: false });
},
open: function(){
this.setState({ showModal: true });
this.loadDataFromServer();
},
showGrid: function(){
this.setState({ tableView: true });
},
showImage: function(){
this.setState({ tableView: false });
},
render: function() {
const Button = ReactBootstrap.Button;
const Modal = ReactBootstrap.Modal;
var base64string = this.state.image;
return (
<div>
<Button onClick={this.open}>
Show
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>{this.props.heading}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.state.tableView
? <div className="row">
<div className="col-md-8"></div>
<div className="col-md-3"><Button onClick={this.showImage}>Show Image</Button></div>
</div>
: <div className="row">
<div className="col-md-8">
<div className="col-md-2">
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th className="text-center vert-align">Antigen</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center vert-align">1</td>
</tr>
<tr>
<td className="text-center vert-align">2</td>
</tr>
<tr>
<td className="text-center vert-align">3</td>
</tr>
<tr>
<td className="text-center vert-align">4</td>
</tr>
<tr>
<td className="text-center vert-align">5</td>
</tr>
<tr>
<td className="text-center vert-align">6</td>
</tr>
<tr>
<td className="text-center vert-align">7</td>
</tr>
<tr>
<td className="text-center vert-align">8</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="col-md-5">
<img className="img-responsive" src={"data:image/jpg;base64," + base64} />
</div>
<div className="col-md-2">
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th className="text-center vert-align">Antigen</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center vert-align">1</td>
</tr>
<tr>
<td className="text-center vert-align">2</td>
</tr>
<tr>
<td className="text-center vert-align">3</td>
</tr>
<tr>
<td className="text-center vert-align">4</td>
</tr>
<tr>
<td className="text-center vert-align">5</td>
</tr>
<tr>
<td className="text-center vert-align">6</td>
</tr>
<tr>
<td className="text-center vert-align">7</td>
</tr>
<tr>
<td className="text-center vert-align">8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-md-3"><Button onClick={this.showGrid}>Show Grid</Button></div>
</div>
}
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});

Categories

Resources