I wrote a function in REACTJS that helps me to read a JSON-File and to display the content of the JSON-File. When I use the code of the function inside of a body the display of the content works fine. But now i want to use the function to fill a table with the content of the JSON and it wont work - the page stays empty. Thank you in advance!
The Function:
function FillData() {
<div className="App">
{
Data.map( datan => {
return(
<div className="box">
{datan.personalActivationWord}
</div>
)
} )
}
</div>
}
Trying to use it to fill a table (Tabledata for Setting1):
function Table() {
return (
<div className={navto.table}>
<div className={navto.header}>HMI</div>
<FillData />
<table className>
<tr>
<th>Setting</th>
<th>Wert</th>
<th>Status</th>
</tr>
<tr>
<td>Setting1</td>
<td><FillData /></td>
<td>Aktualisiert vor 3 Sek.</td>
</tr>
<tr>
<td>Setting2</td>
<td>AKTIV</td>
<td>Aktualisiert vor 3 Sek.</td>
</tr>
<tr>
<td>Setting3</td>
<td>AKTIV</td>
<td>Aktualisiert vor 3 Sek.</td>
</tr>
</table>
</div>
)
}
You are not returning anything in your FillData function.
function FillData() {
return <div className="App">
{
Data.map( datan => {
return(
<div className="box">
{datan.personalActivationWord}
</div>
)
} )
}
</div>
}
Related
I have data fetched form API. I want to display it into the DataTable.
The data is fetched from the API and it got displayed into the DataTable but I have problem in displaying the data. The data is displayed but it also give me
No data available in table
below is what I have tried
<div class="nk-block nk-block-lg">
<div class="nk-block-head">
<div class="nk-block-head-content">
<h4 class="nk-block-title">Data </h4>
<div class="nk-block-des">
<p>Policy</p>
</div>
</div>
</div>
<div class="card card-preview">
<div class="card-inner">
<table class="datatable-init table" id="datatable">
<thead>
<tr>
<th>#</th>
<th>Module</th>
<th>Policy & Terms of Services Details</th>
</tr>
</thead>
<tbody id="dataDetails">
</tbody>
</table>
</div>
</div>
<!-- .card-preview -->
</div>
<!-- nk-block -->
< script >
let cnt = 1;
$(document).ready(function() {
getList();
})
const getList = () => {
axios.get(`${url}getList`)
.then(function(res) {
if (res.data.status == 'success') {
res.data.result.map((e) => {
if (e.role_id == '3') {
$("#dataDetails").append(`
<tr>
<td>${cnt++}</td>
<td>${e.name}</td>
<td>${e.title}</td>
</tr>
`
);
}
})
}
})
}
<
/script>
How do I fix the problem ? Because inside the table have data, but it keep displaying the No data available in table
after adding the $("#datatable").DataTable(); inside the const
$("#dataDetails").append(`
<tr>
<td>${cnt++}</td>
<td>${e.name}</td>
<td>${e.title}</td>
</tr>
`
$("#datatable").DataTable();
);
I got error with Uncaught SyntaxError: missing ) after argument list
showing at this line
I'm trying to prepare a restfulpi at reactjs. But because I'm new to reactjs and I'm not very fluent in English, I have encountered a problem. the purpose of my application is to list the books of a publisher. you can access my code and error from below. I can do it if you help me. Thank you.
Error:
Line 21: Expected an assignment or function call and instead saw an expression no-unused-expressions
My Codes:
`` `
class App extends Component {
state = {
books:[]
}
componentWillMount(){
axios.get('http://localhost:3000/books').then(( response)=>{
this.setState({
books: response.data
})
});
}``
`` `
render() {
let books = this.state.books.map((book) =>
{
return
(
<tr key={book.id}>
<td>{book.id}</td>
<td>{book.title}</td>
<td>{book.rating}</td>
<td>
<Button color="success" size="sm" className="mr-2">Edit </Button>
<Button color="danger" size="sm">Sil</Button>
</td>
</tr>
)
});``
`` `
return (
<div className="App container">
<h1>Book List</h1><br></br>
<Table>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Rating</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{books}
</tbody>
</Table>
</div>
);``
Try this:
render() {
const books = this.state.books.map(book => {
return (
<tr key={book.id}>
<td>{book.id}</td>
<td>{book.title}</td>
<td>{book.rating}</td>
<td>
<Button color="success" size="sm" className="mr-2">
Edit{' '}
</Button>
<Button color="danger" size="sm">
Sil
</Button>
</td>
</tr>
);
});
return <tbody>{books}</tbody>;
}
According to this answer it is a common mistake in the render function.
You are missing the return statement in your render method.
render() {
....
...
return (
<tbody>
{books}
</tbody>
)
}
I am building web application using railway api, on submitting train number I am trying to display data but getting the above error. Actually I used if else condition on fetching data.
below is the code.
import React, { Component } from "react";
export default class TrainRoute extends Component {
constructor(props) {
super(props);
this.state = { trainNumber: "", trainRouteList: "" };
this.onChange = this.onChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onChange(e) {
this.setState({ [e.target.id]: e.target.value } );
}
onSubmitForm(e) {
e.preventDefault();
fetch(
`https://api.railwayapi.com/v2/route/train/${
this.state.trainNumber
}/apikey/sch9lj34uy/`
)
.then(res => res.json())
.then(data => {
this.setState({ trainRouteList: data }, () =>
console.log(this.state.trainRouteList)
);
});
this.setState({ trainNumber: "" });
}
render() {
const { trainRouteList } = this.state;
if (!trainRouteList) {
const list = <div>No Trains Details to display</div>;
const route = <div>No Routes to display</div>;
} else {
const list = (
<div>
<table>
<tbody>
<tr>
<td>Train Name :</td>
<td> {trainRouteList.train.name} </td>
</tr>
<tr>
<td>Train Number :</td>
<td> {trainRouteList.train.number} </td>
</tr>
<tr>
<td>Class :</td>
<td>
{trainRouteList.train.classes.map(trainClass => (
<span key={trainClass.code}>{trainClass.code},</span>
))}{" "}
</td>
</tr>
</tbody>
</table>
</div>
);
const route = trainRouteList.route.map(routeInfo => (
<table>
<tbody>
<tr>
<td>Station :</td>
<td> {routeInfo.station.name} </td>
</tr>
<tr>
<td>Departure Time :</td>
<td> {routeInfo.schdep} </td>
</tr>
<tr>
<td>Arrival Time :</td>
<td> {routeInfo.scharr} </td>
</tr>
</tbody>
</table>
));
}
return (
<div>
<div className="container">
<form
onSubmit={this.onSubmitForm}
className="col-md-8 col-md-offset-4"
>
<div className="row">
<div className="col-md-3">
<input
type="number"
className="form-control input-lg"
placeholder="Train Number"
id="trainNumber"
value={this.state.trainNumber}
onChange={this.onChange}
/>
</div>
<div className="col-md-1">
<button type="submit" className="btn btn-warning btn-lg">
Check Route
</button>
</div>
</div>
</form>
</div>
<div className="card card-fluid">
<div className="container">
{list}
<h3>Train Route</h3>
{route}
</div>
</div>
</div>
);
}
}
Getting error at list and route in render method. Can Anyone tell
me why I am getting this error as I tried all possible solution
Its because list and route are block level variable and you are trying to access them outside of block.
Solution is, Define those variables outside then update the value in if and else block, by that way we can access anywhere inside render method. Like this:
render() {
const { trainRouteList } = this.state;
let list, route;
if (!trainRouteList) {
list = <div>No Trains Details to display</div>;
route = <div>No Routes to display</div>;
} else {
list = ....;
route = ....;
}
I am trying to map through an array and dynamically create a horizontal table, much like the image below here.
I am mapping through an array like so,
const glanceGames = this.state.gameData.map(game => {
return <GameTable
key={game.id}
home_team_name={game.home_name_abbrev}
away_team_name={game.away_name_abbrev}
home_score={game.linescore.r.home}
away_score={game.linescore.r.away}
status={game.status.status}
/>
})
and then using that data to populate the following component.
const GameTable = (props) => {
return (
<div>
<table>
<thead>
<tr>
<th>{props.status}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{props.home_team_name}</td>
<td>{props.home_score}</td>
</tr>
<tr>
<td>{props.away_team_name}</td>
<td>{props.away_score}</td>
</tr>
</tbody>
</table>
</div>
)
}
However, the output is a vertical table rather than a horizontal one. I feel like this should be easy, yet I keep running into issues. Anu suggestions would be helpful! I am using React.
I don't think this is nothing to do with react, we can just do it with css:
...
render(){
<div style={{display: 'flex'}}>
{glanceGames}
</div>
}
I am creating a calendar component and at the moment can't work out why react won't render to the DOM the returned elements of my renderWeekDays method?
Currently I have the following:
export default class CalendarApp extends React.Component {
constructor() {
super();
// Bind Methods
this.renderWeekDays = this.renderWeekDays.bind(this);
}
renderWeekDays() {
return (
<tr><td>Render Week days Please</td></tr>
)
}
render() {
let overviewContent,
checkRates
// Add Check rates and availability section if Rooms page
if (this.props.roomPage) {
checkRates = (
<div>
<h2>Check rates and availability</h2>
<small>or call us on 0330 100 3180</small>
</div>
)
}
// Determine whether to show placeholder or actual dates
if (this.props.dateSelected) {
overviewContent = (
<div>
<span className="icon">Icon</span>
<span className="date-from">21 Jun</span>
<span className="seperate">-></span>
<span className="date-to">25 Jun</span>
<span className="clear">X</span>
</div>
)
} else {
overviewContent = (
<div>
<span className="icon">Icon</span>
<span className="check-in">Check-in</span>
<span className="seperate">-></span>
<span className="check-out">Check-out</span>
</div>
)
}
return (
<div className="calendar hotelroom-follow-calendar">
{ checkRates }
<div className="calendar-overview">
<button>
{ overviewContent }
</button>
</div>
<div className="calendar-container">
<div className="calendar-month">
<span className="previous">Prev</span>
June
<span className="next">Next</span>
</div>
<table className="calendar-table">
<thead>
<tr>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
<td>S</td>
</tr>
</thead>
<tbody>
{ this.renderWeekDays }
</tbody>
</table>
</div>
{ Moment().format() }
</div>
)
}
I am not being presented with any errors, it simply won't load in <tr><td>Render Week days Please</td></tr>.
Any help would be much appreciated as I have double checked all bind() methods etc.
You need to actually invoke the function in your jsx.
<tbody>
{ this.renderWeekDays }
</tbody>
needs to be
<tbody>
{ this.renderWeekDays() }
</tbody>
and voila, it should work!