Develop Reference

Text nodes cannot appear as a child of <tbody>

My code is really simple and I checked everything but this is getting this error repeatedly. Please suggest to me what can i change. I tried using but that dint work.I even checked other answers but they dint work.
import React from "react";
import { Button, Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Employees from "./Employees";
const Home = () => {
return (
<>
<div>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{Employees && Employees > 0 ? Employees.map((item) => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
);
})
: "No data available"}
</tbody>
</Table>
</div>
</>
);
};
export default Home;

If there is no data your table would look like
<table>
<tbody>
No data available
</tbody>
</table>
It needs to have a <tr> and a <td>

Iterating over a series of objects and inserting then into a Bootstrap table

All in all trying to loop over a jsonplaceholder's (/users) name, username, and email. Im getting the data with the help of axios and im displaying it through react. I have two seperate files: App.js (the one that comes with react) and AlbumList.js
In App.js:
import React, { Component } from 'react'
import './App.css';
import AlbumList from './Components/AlbumList';
class App extends Component {
render() {
return (
<div className="App">
<AlbumList/>
</div>
)
}
}
export default App
And in Album.List
import axios from 'axios';
import React from 'react';
export default class AlbumList extends React.Component {
state = {
persons: [],
};
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users').then(res => {
console.log(res);
this.setState({ persons: res.data });
});
}
render() {
return (
<div>
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">username</th>
<th scope="col">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
{/* { this.state.persons.map(person => <div>{person.name} | {person.username} | {person.email}</div> )} */}
</div>
)
}
}
The table im using is the one that bootstrap offers, the default one. How do I do this? thanks

You need to map the data you got from your fetch request to the "tbody" tag, here you are just mapping the result in a div.
Check below your code with the modification needed:
render() {
return (
<div>
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">username</th>
<th scope="col">e-mail</th>
</tr>
</thead>
<tbody>
{ this.state.persons.map(person =>
<tr>
<th scope="row"></th>
<td>{person.name}</td>
<td>{person.username}</td>
<td>{person.email}</td>
</tr> )}
</tbody>
</table>
</div>
)
}
Edit: typo

Not able to manipulate map functions in react JS

I am trying to hit an api available at covid19 api [ you can see directly , click it ] but I am not able to map through the state.
I tried browsing the questions and still didn't find it .
my code in app.js is
import React, { Component } from 'react'
import api from '../api/covidapi'
import SearchBar from './SearchBar'
class App extends Component {
constructor(props) {
super(props);
this.state = {
country : 'Please Enter the country',
active_cases : 'No country found',
countries : [],
errorMessage : '',
isLoading : false,
};
}
async componentDidMount() {
const response = await api.get('/summary');
console.log('data loaded = > ', response);
console.log(response.data.Countries.length) // giving 247
console.log('countries ', response.data.Countries) //lists all countries {....},{...}...
this.setState({countries:response.data.Countries})
// console.log('global end')
this.setState({
totalConfirmed : response.data.Global.TotalConfirmed,
})
} //component did mount ended.
onSearchSubmit = async (country) =>{
console.log(country)
try {
const response =
await api.get(`/live/country/${country}/status/confirmed`)
this.setState({country:country, active_cases:response.data[6].Active})
}
catch(e) {
this.setState({errorMessage : "Country Doesn't exist or misspelled"})
}
}; //onsearch submit ended.
render() {
return (
<div>
<div className="container">
<p style={{textAlign:'center',
backgroundColor:'green',
color:'white',
width:'97%',margin:'auto',
padding:'24px',
marginTop:'12px',}}>
Total confirmed as of now is <span> : </span>
<span style={{color : 'red'}} >
{this.state.totalConfirmed}
</span>
</p>
<SearchBar onSubmit = {this.onSearchSubmit}/>
</div>
<div className="container">
<h2 className="bg bg-primary" style={{marginBottom:'0px',
textAlign:'center',marginTop:'15px',
padding:'10px'}}>Covid19 Cases In single Country
</h2>
<table className="table table-striped">
<thead>
<tr>
<th>Country</th>
<th>Acitve Cases</th>
</tr>
</thead>
<tbody>
<tr>
<td>{this.state.country}</td>
<td>{ this.state.active_cases}</td>
</tr>
</tbody>
</table>
</div>
<br />
<hr />
<div className="container">
<div style={{textAlign:'center',color:'red',fontWeight:'bold'}}>
</div>
<h2 className="bg bg-primary" style={{marginBottom:'0px',
textAlign:'center', padding:'10px'}}>
Covid19 Cases Worldwide
</h2>
<table className="table table-striped table-hover table-dark">
<thead>
<tr>
<th>S.N</th>
<th>Country Name</th>
<th>Confirmed Cases</th>
<th> Total Deaths</th>
<th>Total Recovered</th>
</tr>
</thead>
<tbody>
{
Object.keys(this.state.countries).map((country) => (
<tr>
<td>{country}</td>
<td>........</td>
<td>........</td>
<td> ........</td>
<td>............</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
);
}
}
export default App;
and covidapi.js code is
import axios from 'axios'
export default axios.create({
baseURL :'https://api.covid19api.com'
})
The problem is in this section of the code in app.js
{
Object.keys(this.state.countries).map((country) => (
<tr>
<td>{country}</td>
<td>........</td>
<td>........</td>
<td> ........</td>
<td>............</td>
</tr>
))
}
I am not able to map through countries in my state , I think there is
problem with the Objects and array.
when Render the country that is passed in map it return the integer value like 1,2,3 .... and not able to get other values.
Response in the console looks like this
What I am trying is to display the all the countries list to the table whenever the application loads.

You can use this.state.countries directly without Object.keys() (It is an array already), and use the properties inside each item as follows:
{
this.state.contries.map(item => {
return(
<tr>
<td> { item.Country } </td>
<td> { item.totalConfirmed } </td>
... // Other tds
</tr>
)
}
}

Table row cannot appear as a child of a div component

I am trying to do mapping in render method using Table but it gives error. When I run this component it do not show any output. I share my code below, please have a look in render method where i define table.
Thank you
import React from "react";
import DisplayCRMUser from "./DisplayCRMUser";
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { contactReport_entities : []};
}
render() {
return (
<div>
<div className="table-responsive-xs cstm-configure-Content">
<table>
<thead>
<tr>
<th>Type</th>
<th>Topic</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.contactReport_entities.map ((val, index) => {
<tr key={index}>
<td>{val.subject}</td>
<td>{val.createdon}</td>
</tr>
})}
</tbody>
</table>
</div>
</div>
);
}
}

Add a scrollbar to the table which is having a footer

I am new to web development. I am using react js . Here I have a table
which is like ,
Now, my code is ->
import React from 'react';
import { connect } from 'react-redux';
import { Table } from 'react-bootstrap';
import './Jobs.css';
class UserJobs extends React.Component {
constructor(props) {
super(props);
console.log("props are ==>", props.jdRecords);
this.state = {
jdRecords: props.jdRecords
}
}
render() {
const compName = {
fontSize: '14px'
};
return (
<div className="container-fluid">
<div className="row">
<Table striped condensed hover>
<thead>
<tr>
<th>Sr.No.</th>
<th>Company Name</th>
<th>Technology</th>
<th>Job Title</th>
<th>Total Score</th>
<th>Average Score</th>
</tr>
</thead>
<tbody>{this.props.jobData.map(function (item, key) {
return (
<tr key={key}>
<td><b style={compName}>{item.id}</b></td>
<td><b style={compName}>{item.attributes.companyName}</b></td>
<td>abc Developer</td>
<td>{item.attributes.name}</td>
<td>30</td>
<td>30</td>
</tr>
)
})}</tbody>
</Table>
<footer>
footer
</footer>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
jobDescription: state.JobDescriptionData,
jobData: state.JobDescriptionData.jobData.data
}
}
export default connect(mapStateToProps, null)(UserJobs);
Now , Here, This table has more than 10 entries. Now, I want to have the scrollbar to that table only and not to the whole page , and also it has
a footer.
So, I tried :
height : 200px;
overflow-y : auto
But this is not working .
because it it has a navigation bar as well.
Can any one give me some hint ?

You need a wrapper div for the table and add max-height as 200, overflow :auto.