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>
);
}
}
Related
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
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>
)
}
}
I have a child component PatientRow which is receiving mapped patients array in props from it’s parent ObsTabel. The odd thing is the PatientRow is never rendered and I can’t find the PatientRow component on React Dev tools either. On the other hand if I just pass the patients array then map it in PatienRow the components gets rendered, however this is not what I want. I want to map the array in ObsTabel & pass it to PatientRow so that the rows are individual component with their own state. Please let me know if you can find my mistakes.
Note: ObsTable has a parent component from where it is receiving patient array passed as props. file structure - ParentComponent(with patient array).js>ObsTable.js>PatientRow.js
This doesn’t exist in DOM
export default class PatientRow extends React.Component {
constructor(props) {
super(props);
this.state = {
disabled: false
};
}
render() {
const { id, label, name, room, timestamp, observationLevel, roomStatus, patient, index } = this.props;
console.log(this.props);
return (
<tbody>
<tr key={id} >
<td>{label}</td>
<td>{name}</td>
<td>{observationLevel}</td>
<td>{roomStatus}</td>
<td>{timestamp} </td>
<td>
<div>
<Button> Awake </Button>
<Button>Asleep/Breathing</Button>
</div>
<Button> View Room </Button>
<div>
<Button>Awake </Button>
</div>
</td>
<td>
<Button>Asleep</Button>
</td>
</tr>
</tbody>
);
}
}
export default class ObsTabel extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div >
<Table bordered striped hover >
<thead>
<tr>
<th>Room</th>
<th>Patient Name</th>
<th> Obs Level </th>
<th>Room Status</th>
<th>Obs Due In</th>
<th>Patient Location</th>
<th>Patient Obs Detail</th>
<th>Comment</th>
</tr>
</thead>
{this.props.patients.map((patient, index) => {
// console.log(patient); logs each patient
<div key={index}>
<PatientRow
name={patient.name}
id={patient.id}
label={patient.label}
room={patient.room} observationLevel={patient.observationLevel}
roomStatus={patient.roomStatus}
timestamp={patient.timestamp}
index={index}
/>
</div>;
})}
</Table>
</div>
</div>
);
}
}
it's because you are not returning anything inside map
return (
<div key={index}>
<PatientRow
name={patient.name}
id={patient.id}
label={patient.label}
room={patient.room}
observationLevel={patient.observationLevel}
roomStatus={patient.roomStatus}
timestamp={patient.timestamp}
index={index}
/>
</div>
);
I have a component in react where I pass so data in a prop:
<Mycomponent names={[{name: 'peter'},{name: 'pan'}]} />
Then I have a component which has a table and where I want to display the data in a
Here is the component
import React from 'react';
const Mycomponent = (props) => <div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{ props.names }</td>
</tr>
</tbody>
</table>
</div>;
export default Mycomponent;
How do I loop and display each name in a <tr><td>{props.names.name}</td></tr> ?
<tbody>
{
props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
}
</tbody>
will iterate over all of props.names and return a tr for each
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.