I literally threw away all my code just to isolate the issue and fix it, but it didnt work and the css is not showing
(main file)
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
App.js
import Table from 'react-bootstrap/Table'
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
)
}
}
export default App
. .
Any help appreciated, i just want to use bootstrap css in my app
my path and folders:
What i did in this same case, is to install normal bootstrap package and import the default styles from your sass file.
#import '../bootstrap/css/bootstrap.min.css';
Related
I just follow the example for creating a table with the bootstrap Table element.
Here is my StackBlitz, I wonder why a thick black line exists at the bottom of the table header.
However, the example site does not have a thick black line exists at the bottom of the table header.
Is there something wrong? is it possible to remove the thick black line from the bottom of the table header?
It is border assigned by bootstrap when you use Table group dividers. See Bootstrap docs for more details.
To get remove it add borderTop: 'none' to tbody. So updated component looks like below
import React from 'react';
import Table from 'react-bootstrap/Table';
export default function App() {
return (
<div className="m-4">
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody style={{ borderTop: 'none' }}>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan={2}>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
</div>
);
}
Stackblitz Reproduction: https://react-ue5ckm.stackblitz.io
You have to need override the following style
.table>:not(:first-child) {
border-top: 2px solid currentColor;
}
to remove border
.table>:not(:first-child) {
border-top: none;
}
My goal is to create a table with React Bootstrap. To start with, I have used following example.
Now I have the following problem:
Instead of the header line of the table being above everything, it is suddenly to the left of the body. I have taken the code exactly as in the example and therefore don't know why this happens.
I use the react-bootstrap version: 1.5.2 and have imported the CSS in the class index.js like this import 'bootstrap/dist/css/bootstrap.min.css';.
And this is the code I copied from the page and inserted in my code 1:1.
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
How can I fix this and what was the problem?
Have you imported table?
import Table from 'react-bootstrap/Table'
See bottom of documentation to learn more:
https://react-bootstrap.netlify.app/components/table/#table-api
Goal:
When you press one of the cell (only for column country) containing the name of a country, a alert message with the name of the country should be displayed.
Problem:
What part am I missing in the source code.
Do not know what syntax code is needed in order to achieve the goal.
Any advice?
Info:
I'm newbie in reacjt.
Stackblitz:
https://stackblitz.com/edit/react-faabjl
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
sayHello() {
alert('');
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Your sayhello function by default contains the event object. By that you can extract the name of the country needs to be displayed.I have rewritten your code.However for large set of table data you need to use a map function to iterate over the whole array of objects and display the result.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
sayHello(e) {
alert(e.target.innerHTML);
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));
You can use a map function like this.
let array = [{company:'Alfreds Futterkiste',contact:'Maria Anders',Country:'Germany'},{company:'centro',contact:'Franciso',country:'Mexico'}]
Now you can iterate over the array with map function.
array.map(element=>{
return <tr key={element.company}>
<td>{element.company}</td>
<td>{element.contact}</td>
<td onClick={this.sayhello}>{element.country}</td>
</tr>
}
I think this is what you want, for Hello component to work you need to update your state to be able to update its value, and to do so you have to bind your event listener to your class component like this:
this.sayHello = this.sayHello.bind(this);
The following is the full code snippet:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
this.sayHello = this.sayHello.bind(this);
}
sayHello(e) {
this.setState({
name: e.target.textContent
});
alert(e.target.textContent);
}
render() {
return (
<div>
<Hello name={this.state.name} />
<table border="1">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td onClick={this.sayHello}>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td onClick={this.sayHello}>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td onClick={this.sayHello}>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td onClick={this.sayHello}>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td onClick={this.sayHello}>Italy</td>
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById('root'));
you can just treat sayHello() like a normal event in javascript
https://stackblitz.com/edit/react-3zzcoe?file=index.js
I am new in react js, i have 2 files, App.js and Table.js, I have included Table.js file in App.js and when i used <TableData />, it gives me error, Line 12: 'TableData' is not defined react/jsx-no-undef, here i have added my whole code for that, can anyone please help me why it is giving me that error,
App.js :
import React, { Component } from 'react';
import './App.css';
import { Button, Table } from 'react-bootstrap';
import './Table.js';
class App extends Component {
render() {
return (
<div className="App">
<p>Edit <code>src/App.js</code> and save to reload.</p>
<Button variant="primary">Primary</Button>
<TableData />
</div>
);
}
}
export default App;
Table.js
import React, { Component } from 'react';
import { Button, Table } from 'react-bootstrap';
import './App.css';
class TableData extends Component {
render() {
return (
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
);
}
}
export default TableData;
You need to define TableData when importing.
import TableData from './Table.js'
i have a very annoying error when trying to display stuff in react table , i would like to make a table and display all values in rows , but for some reason i am getting this error saying Adjacent jsx elemetns must be wrapped in an enclosing element next to the line where im trying to map over results. Any help is greatly appreciated !! thanks!!!
import React from "react";
import "./index.css";
// could also import the sass if you have a loader at dayz/dayz.scss
import moment from 'moment';
import { tasksRef, timeRef } from './firebase';
const defaultColor = "#000";
class Show extends React.Component {
state = {
Events: [],
loading: true
};
render(){
const { Events, Loading } = this.state;
const orderedcars = Events;
let List;
if (Loading) {
List = <div className="TaskList-empty">Loading...</div>;
} else {
List = (
<div>
<table>
<thead>
<tr>
<th scope="row">Event Name</th>
<th scope="row">Event date</th>
<th scope="row">Event timeRef</th>
</tr>
</thead>
<tbody>
{Events.map(car => (
<tr>
<td>{car.name}</td>
<td>{car.timeRef}</td>
<td>{car.description}</td>
</tr>
</tbody>
</table>
))}
</div>
);
}
return(
<div>
{List}
</div>
);
}
}
export default Show;
the problem is that the closing tbody and table atgs should be outside map function as follows
{Events.map(car => (
<tr key={car.name}>
<td>{car.name}</td>
<td>{car.timeRef}</td>
<td>{car.description}</td>
</tr>
))}
You want to place the closing </tbody> and </table> tags outside of the function given to Events.map.
List = (
<div>
<table>
<thead>
<tr>
<th scope="row">Event Name</th>
<th scope="row">Event date</th>
<th scope="row">Event timeRef</th>
</tr>
</thead>
<tbody>
{Events.map(car => (
<tr>
<td>{car.name}</td>
<td>{car.timeRef}</td>
<td>{car.description}</td>
</tr>
))}
</tbody>
</table>
</div>
);