ContactList.js
var React = require('react');
var Contact = require('./contact.js');
var ContactList = React.createClass({
render: function() {
return(
<div>
<h3>Contacts</h3>
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{
this.props.contacts.map(function(contact, index) {
<Contact contact={contact} key={index} />
})
}
</tbody>
</table>
</div>
)
}
Contact.js
var React = require('react');
var Contact = React.createClass({
render: function() {
return(
<tr>
<td>{this.props.contact.name}</td>
<td>{this.props.contact.phone}</td>
<td>{this.props.contact.email}</td>
</tr>
)
}
})
module.exports = Contact;
Basically, i am able to get the contacts data from firebase in console but i want to display all the contacts i saved in the table. Behind the scenes, there is react-flux setup. State 'contacts' is basically an object inside an array, when i go to react tools, i can't see Contact component there, also if i try to console.log something to verify nothing works in Contact component, it seems like props is not passing to Contact component, also sometimes i get
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. don't know whether it is because of this.
Can somebody explain me what is wrong ? Thanks in advance!!.
You need to send props to ContactList.js i.e, the response.data that you get after hitting firebase.
Something like this:-
React.render(<ContactList contacts= 'your response object' />);
Check whether your passing or not.
To solve it more easily you can use React.Component ,
ContactList.js
import React from 'react';
import Contact from './contact'
class ContactList extends React.Component {
{contacts}=this.props;
render(){
return(
<div>
<h3>Contacts</h3>
<table className="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
{
contacts.map(function(contact, index) {
<Contact contact={contact} key={index} />
})
}
</tbody>
</table>
</div>
)
}
}
export default ContactList
Contact.js
import React from 'react'
class Contact extends React.Compponet{
{contact}=this.props;
render() {
return(
<tr>
<td>{contact.name}</td>
<td>{contact.phone}</td>
<td>{contact.email}</td>
</tr>
)
}
}
export default Contact
You have to pass the props to the ContactList class which would internally pass it to Contact.
Thank you.
You need to return the Contact component inside the ContactList component like this:
this.props.contacts.map(function(contact, index) {
return <Contact contact={contact} key={index} />
})
or, you can use arrow function:
this.props.contacts.map((contact, index) => <Contact contact={contact} key={index} />)
Related
I ran into this error when trying to run my React code and see it's a common error but after looking at other people's questions I am having issues still how to fix this. I am still new to React so I'm kinda lost. What the code is supposed to do is take a JSON file and and display it as a table and the button is supposed to then sort it by last name and redisplay the table.
import data from './data.json' //Imports the JSON from local file, can be changed later to pull from api
import {Button, View} from 'react-native';
export default function App() {
return (
<PaientTable/>
);
}
class PaientTable extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
// this.sort = this.sort.bind(this);
}
render(){
function sort (){
return this.setState(
data.sort((a, b) => {//sorts by name
if (a.lName < b.lName) {
return -1;
}
if (a.lName > b.lName) {
return 1;
}
return 0;
})
);
}
return (
<table>
<caption>Paients</caption>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>
<button type="button" onClick={() => this.sort.bind(this)}>
Last Name
</button>
</th>
</tr>
</thead>
<tbody>
{data.map(paient => (
<tr>
<td>{paient.id}</td>
<td>{paient.fName}</td>
<td>{paient.lName}</td>
</tr>
))}
</tbody>
</table>
);
}
}
You've defined sort to be a local variable inside of render, But all the places where you try to access it you're treating it as though its a member of the class. So instead of structuring it like this:
class PaientTable extends React.Component {
// ...
render() {
function sort () {
// ...
}
// ...
}
}
Do this:
class PaientTable extends React.Component {
// ...
sort() {
// ...
}
render() {
// ...
}
}
I am trying to render names from a API with Axios. Even I can see all data in console but unable to render as it shows error:
users.map is not a function
Below I'm sharing my code of the file. I'm quite new that might be the reason I'm unable to figure it out.
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Container, Table} from "react-bootstrap";
import axios from 'axios';
class App extends React.Component {
state = {
users: [],
};
componentDidMount () {
axios.get('https://5w05g4ddb1.execute-api.ap-south-1.amazonaws.com/dev/profile/listAll')
.then(response => {
const users = response.data;
this.setState({ users });
console.log(this.state.users);
})
}
render() {
const { users } = this.state;
return (
<div className="App">
<Container fluid>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th><div id="">Image</div></th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
{ users.map(user => { return <td key={user.id}>{ user.name }</td> }) }
</tr>
</tbody>
</Table>
</Container>
</div>
)
}
}
export default App;
The response you are getting is not an array, but an object like this:
{"list":[{"id":"MnJJA0dbuw","name":"Anand Sharma","img":"https://incablet-tests.s3.ap-south-1.amazonaws.com/conference-content/photos/sponsors/Anand.jpeg","gender":"m","age":46,"date":"23/11/2019","status":"onboarded"}]}
You can access the array by replacing const users = response.data; with const users = response.data.list;
In your axios get, in the “then” part change the line:
const users = response.data;
To:
const users = response.data.list;
fast hack
{users.list.map(user => { return <td key={user.id}>{ user.name }</td> }) }
There are 2 errors:
the response from api is not a list but an object, u need to go to response.list to use the list from the response
it should be
const users = response.data.list
your
this.setState({users})
,you will need to change it to
this.setState({users:<VARIABLE_NAME_TO_HOLD_USER_DATA>})
even what you write is valid like in ES6, that is somehow a bad idea, it is not a clear what are you doing, just define what u want to copy to ur component state
I want the Torrent component to render without having that Torrent render to a DOM element. how do i do it?
I want my Torrent Table Component to be comprised of Torrent Components, based on what my API feeds back to me. However I'm getting a problem where it doesn't render on the website since ReactDOM.render() is not binding the component to a DOM element.
class TorrentTable extends React.Component
{
constructor(props)
{
super(props);
this.state = {
torrents : []
};
}
componentDidMount()
{
let torrent_string = window.location.href.split("/")[4];
console.log(window.location.href);
fetch(`api/get/${torrent_string}`)
.then(res => res.json())
.then(data => {
this.setState({
torrents : data
})
});
}
render()
{
return(
<table className="table" style={{ width : "100%"}}>
<thead>
<tr>
<th scope="col">
</th>
<th scope="col">
Torrent Name
</th>
<th scope="col">
Magnet
</th>
</tr>
</thead>
<tbody>
{
this.state.torrents.map(torrent => {
<Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>
})
}
</tbody>
</table>
);
}
}
ReactDOM.render(<TorrentTable />, document.getElementById("torrent_table"));
You only need to render the root of your application with ReactDOM.render().
I think the problem is that you aren't returning the component from within your map statement.
Either add a return statement like this.
this.state.torrents.map(torrent => {
return <Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>
})
Or return it directly like this.
this.state.torrents.map(torrent => (
<Torrent name={torrent.title} magnet={torrent.magnet} image={torrent.image_url}/>
))
I have a question concerning Mern stack. I have a program which is similar to stackOverflow, where you post a question and someone can reply. At the moment my program is able to post questions and also get a list of all questions. I have a link at each and every questions,so that when you click at any of the questions it should open that specific question. The id of the questions is visible at the rout e.g http://localhost:3000/link/5cae2dda9723ad157c085370. The problem am having is to get the content of that specific question
//*this code is able get the list of all questions*//
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { EMLINK } from "constants";
const Question = props => (
<tr>
<td>{props.question.author_name}</td>
<td>{props.question.question_title}</td>
<td>{props.question.question_input}</td>
<td>
<Link to={"/link/" + props.question._id}>comment</Link>
</td>
</tr>
);
class QuestionList extends Component {
constructor(props) {
super(props);
this.state = { questions: [] };
}
componentDidMount() {
axios
.get("http://localhost:4000/questions/")
.then(response => {
this.setState({ questions: response.data });
})
.catch(function(error) {
console.log(error);
});
}
questionList() {
return this.state.questions.map(function(currentQuestion, i) {
return <Question question={currentQuestion} key={i} />;
});
}
render() {
return (
<div>
<h3>Question List</h3>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Question</th>
<th>Action</th>
</tr>
</thead>
<tbody>{this.questionList()}</tbody>
</table>
</div>
);
}
}
export default QuestionList;
*/The below code is the one that i need to only show one specific question by ID*//
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
const Questioners = props => (
<tr>
<td>{props.question.author_name}</td>
<td>{props.question.question_title}</td>
<td>{props.question.question_input}</td>
</tr>
);
class QuestionLink extends Component {
constructor(props) {
super(props);
this.state = {
author_name: "",
question_title: "",
question_input: ""
};
}
render() {
return (
<div>
<h3>Question List</h3>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>Question</th>
</tr>
</thead>
<tbody>{}</tbody>
</table>
</div>
);
}
}
export default QuestionLink;
I've done the following in these scenarios:
Take the ID as a parameter to the Component (in this case, QuestionLink)
Retrieve the question from your REST API as a get for the particular resource (with ID) in your ComponentDidMount
When mounting your react app (top-level component), retrieve the Id from the url. I prefer to use a query string
import { parse } from "querystring";
let values = parse(window.location.search.substring(1));
And then mount <QuestionLink questionId={values["questionId"]} />
EDIT: I haven't used template engines for this, but it should be well suited for this kind of work. You can use something like pug for the server side rendering, pass the id to the view from your middleware, and render to a react component. I'd probably only do this if I did this sort of processing extensively and/or needed information that only the server had.
Thanks for help, i made it work. i solved the issue as follow
<Route
path="/link/:id"
render={props => <QuestionLink {...props} />}
/>
this.state = {
currentQuestion: {}
};
componentDidMount() {
axios
.get("http://localhost:4000/questions/")
.then(response => {
this.setState({
currentQuestion: response.data.find(elm =>
elm._id == this.props.match.params.id
)
});
})
import React from 'react';
import { observer } from "mobx-react"
import { inject } from "mobx-react"
import { deleteTradeData } from "../Actions/Actions"
import axios from "axios"
#observer
export default class TradeTable extends React.Component {
componentDidMount() {
//Adding data of db into mobx store
axios.get(`http://localhost:8091/trade`)
.then(res => {
this.props.store.arr = res.data;
console.log(res.data ,"resssssdata")
})
}
delete = (id) => {
console.log(id + "wdccerfec")
deleteTradeData(id);
window.location.reload();
}
edit = (id) => {
console.log(id + "iddddddddddddddddddddd")
this.props.store.editId = id;
this.props.store.formToggleFlag = false;
// alert("hi")
// window.location.reload();
}
render() {
var tableData = this.props.store.arr;
return <div className="panel panel-default">
{this.props.store.newTradeRender}
<div className="panel-body tradeComponent div-background table-responsive">
<table className="table table-striped tb div-lightbackground">
<thead className="thead-dark ">
<tr>
<th>Date</th>
<th>Commodity</th>
<th>Side</th>
<th>Qty (MT)</th>
<th>Price (MT)</th>
<th>Counterparty</th>
<th>Location</th>
<th></th>
</tr>
</thead>
<tbody>
{
tableData.map((tableItem, index) => {
return (
<tr key={index * Math.random()}>
<td>{tableItem.tradeDate}</td>
<td>{tableItem.commodity}</td>
<td>{tableItem.side}</td>
<td>{tableItem.quantity}</td>
<td>{tableItem.price}</td>
<td>{tableItem.counterparty}</td>
<td>{tableItem.location}</td>
<td>
<button type='submit' className="btn btn-primary table-style" onClick={this.delete.bind(this, tableItem.id)} >
<span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</td>
<td>
<button type='submit' className="btn btn-primary table-style edit edit-button" onClick={this.edit.bind(this, tableItem.id)} >
<span className="glyphicon glyphicon-pencil selected-glyph edit-pencil" aria-hidden="true"></span>
</button>
</td>
</tr>)
})
}
</tbody>
</table>
</div>
</div>
}
}
The above codes get rendered when an action in other component is fired (which is my logic).
The problem is that the render of the trade table component doesn't results in updating of the table data.Now this behavior is expected because the component did mount is called after render hence since the store data is not updated so trade table is not updated.
But i am unable to solve this problem. I tried component will mount and will update but that is causing some strange behavior ( a loop of updating table runs ) which cause my system & browser to freeze .So i cant not use that.Is there any logic or alternative?
In React JS you cannot change the props by doing this.props.store.arr = res.data;. This is because in React JS there is unidirectional flow of data, which means data can only flow in one direction and that is from parent to child. So the only way to change the props is by changing the value that is passed down by the parent.
Also ReactJS re-renders only on certain conditions. One is when reactJS state changes and another is by using shouldComponentUpdate. And you have to change React state using setState. If you change the state like this.state.foo = "bar" react will not re-render.