first of all I am pretty new to react and developing a react app. In my app, I am fetching data from an api inside componentDidmount()
constructor(props){
super(props);
this.state={
employeeData:[]
}
}
componentDidMount(){
axios.get("http://localhost:8080/hris/api/employee/123456/personal?authToken=ldkasjfdsoue",
)
.then(response => response.data)
.then((data) => {
this.setState({ employeeData: data },()=>
//console.log("dfdf"+JSON.stringify(this.state.employeeData['employeeID'])))
**// i am getting the data here**
})
.catch(err=> console.log("whyerror"+err))
}
I stored this data into state. But when I want to send data into another component, error occurs.
{console.log("isdata"+JSON.stringify(this.state.employeeData))}
{/* {<Table data={this.state.employeeData}/> } */}
here I am getting all data, but when I am doing this
{console.log("isdata"+JSON.stringify(this.state.employeeData))}
{<Table data={this.state.employeeData}/> }
Table.js
constructor(props){
super(props);
console.log('thisprops'+JSON.stringify(props)) //giving null value
}
This shows that the Table component received null props.
Now how can I pass data to Table component ?
What error occurs? Is employeeData an array? If so then you can make the initial employeeData as an empty array like;
ParentComponent.jsx
export class ParentComponent extends Component {
constructor(props) {
super(props)
this.state = {
employeeData: []
}
}
componentDidMount(){
axios.get("http://localhost:8080/hris/api/employee/123456/personal?authToken=ldkasjfdsoue",
)
.then(response => response.data)
.then((data) => {this.setState({ employeeData: JSON.stringify(data)})
.catch(err=> console.log("whyerror"+err))
}
render(){
return (
<Table data={this.state.employeeData}/>
)
}
}
Table.jsx
export class Table extends Component {
componentDidMount(){
console.log(this.props.data) // it should be here
}
render(){
return (
{
this.props.data && this.props.data.map((employee) => {
...
})
}
)
}
}
<Table data={this.state.employeeData}/>
No need to wrap with brackets, this is JSX and not javascript
better yet do this
<Table data={JSON.stringify(this.state.employeeData)}/> to avoid standalone code
Related
I'm getting the above error and I don't know how to handle it.
I got a component. And in the render() i'm looping through an array and placing another component and parsing a value to that component like this:
render() {
let allProducts = this.state.products.map((product, i) => {
return (
<div key={product.article}>
...
<PriceStock value={product.article} />
...
</div>
)
})
}
In the PriceStock component i'm fetching some data with axios like the code below:
export default class PriceStock extends React.Component {
constructor(props) {
super(props);
this.state = ({
buttoprice: ''
})
this.getPriceAndStock = this.getPriceAndStock.bind(this)
}
getPriceAndStock(articleNo) {
return axios.post('LINK_TO_URL', {
articleNo: articleNo
}).then(result => {
return result.data
})
}
async componentDidMount() {
let pricestock;
pricestock = await this.getPriceAndStock(this.props.value)
let bruttoPrice = PRICE_TO_PARSE_TO_THE_STATE;
this.setState({ buttoprice: bruttoPrice })
}
render() {
return (
<div >
{this.state.buttoprice}
</div>
);
}
}
The error seems to happen when I try to setState in the componentDidMount, any suggestions?
this is an error occurs because you are updating state before it gets initialized
perform your loading activities in the constructor it is the right way to do it
getPriceAndStock(orderNumber, articleNo) {
return axios.post('LINK_TO_URL', {
orderNr: orderNumber, vareNr: articleNo
}).then(result => {
return result.data
})
}
constructor() {
this.getPriceAndStock(this.props.value)
.then(pricestock=>{
let bruttoPrice = PRICE_TO_PARSE_TO_THE_STATE;
this.state({ buttoprice: bruttoPrice })
})
.catch(console.log)
}
Found the answear in this question: https://github.com/material-components/material-components-web-react/issues/434
It's remindend me a little bit about the comment with another stackoverflow question.
I am new with reactjs.
This is what I am trying
class EventDemo extends Component {
constructor(){
super()
this.getStarWars()
this.state = {}
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
But This following error i am getting
What I am doing wrong here ? It supposed to work .
First of all,you shouldn't call your this.getStarWars() function inside the constructor, it is a very bad practice and could cause you troubles, http calls in React component should be generally called from the componentDidMount function.
However the issue in this case is another one,you haven't given an initial value to this.state.names, so when the component tries to do the initial render it fails because the names are undefined since the initial render appens before the http call is resolved
You code should be fixed like this:
class EventDemo extends Component {
constructor(){
super()
this.state = { names:[] }
}
componentDidMount(){
this.getStarWars()
}
getStarWars = ()=> axios.get('https://swapi.co/api/people')
.then(res => {
console.log(res.data)
this.setState({
names: res.data.results
})
})
render() {
console.log(this.state.names);
return (
<div>
{this.state.names.map(function(e){
return <li>{e.name}</li>
})}
</div>
);
}
}
I am getting props from parent component and trying to render
From parent component, I am passing the headings
Parent Component:
class CoreCloudServices extends React.Component{
constructor(props){
super(props)
this.state = {
services:[]
}
}
loadData(){
var url = "https://api.myjson.com/bins/1ftfdx";
fetch(url)
.then(response => {
return response.json();
})
.then(d => {
this.setState({ services: d });
})
.catch(error => console.log(error))
}
componentDidMount() {
this.loadData();
}
render(){
<StatusFrame headings={this.state.services}/>
}
Child Component:
class StatusFrame extends React.Component{
constructor(props){
super(props)
this.state = {
labelHeading : this.props.headings
}
}
componentWillReceiveProps(newProps)
{
this.setState({labelHeading: newProps.headings} , ()=>{
console.log(this.state.labelHeading);
});
}
render(){
return(
<div>
<div>
{
this.state.labelHeading.map(((head, index) => {
<div>child {head.title}</div>
})
)
}
</div>
</div>
)}}
this.state.labelHeading is null but I am setting the state in componentwillreceiveprops()
you can just use the props without using the state , and you must return from your parent render method , also in map callback you should return too
class CoreCloudServices extends React.Component{
//...
render(){
return (<StatusFrame headings={this.state.services}/>)
}
}
class StatusFrame extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<div>
{
this.props.headings !== null ?
this.props.headings.map(( (head, index) =>
{
return <div>child {head.title}</div>
}))
:
null
}
</div>
</div>
)
}
}
I have a problem where in I'm going to access a state inside a method inside my parent component from my child component it returns me an undefined value which i'm sure in the first place have a value of objects in an array.
Parent Component:
class BoardList extends React.Component {
constructor(props){
super(props);
this.state = {
lists: []
};
}
componentWillMount(){
this.props.getBoardLists()
.then((result) => {
this.setState({
lists: result
});
})
.catch(error => {
console.log(error);
});
}
addBoardLists(result){
// This is i'm getting my undefine state lists :(
console.log(this.state.lists);
this.setState({
lists: this.state.lists.concat([result])
});
}
render() {
const { isLoading,data } = this.props;
if(isLoading){
return (
<Loading />
);
}
return (
<div className={style.boardListContainer}>
<h1 className={style.boardListTitle}>Personal Board</h1>
<Row>
<BoardItem item={this.state.lists} />
<BoardAdd onDisplay={this.fetchBoardLists} onAddItem={this.addBoardLists} />
</Row>
</div>
)
}
}
Child Component:
class BoardAdd extends React.Component {
constructor(props){
super(props);
this.state = {
name: '',
boardAddModalShow: false
}
}
openAddBoardModal(){
this.setState({ boardAddModalShow: true });
}
closeAddBoardModal(){
this.setState({ boardAddModalShow: false });
this.props.dispatch(reset('BoardAddModalForm'));
}
addBoard(formProps) {
this.props.addBoard(formProps).then((result) => {
// This is where I access my addOnItem from my parent component
this.props.onAddItem(result);
this.props.dispatch(reset('BoardAddModalForm'));
this.closeAddBoardModal();
})
.catch(error => {
console.log("error");
console.log(error);
});
}
}
Perhaps this will help?
class BoardList extends React.Component {
constructor(props){
super(props);
this.state = {
lists: []
};
this.addBoardList.bind(this)
}
What is this magical .bind? You should read up on what this means in JavaScript (which it almost never thinks what you think it means). By default, ES6 constructors do not bind (for some crazy reason in my opinion), their own methods to their own this value. Thus, the this in your method is referring to a completely different this you are thinking of and consequentially, making this scenario quite bizarre.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this
class Widgets extends Component {
constructor(props){
super(props);
this.state = {
accessToken: "",
listAccounts:[],
}
}
componentWillMount(){
this.setState({listAccounts: this.loadAccountsData()})
}
loadAccountsData(){
//return data from server
}
render() {
return (
<Content>
{this.state.listAccounts.map( (Account) => <Account accountData={Account} />)}
</Content>
)
}
}
above is blue print of my code. I am unabele to access state in render?
Error: undefined is not an object (evaluating 'this.state.listAccounts.map')
you are setting state on an async request. you need to wait till the response comes back to set your state.
class Widgets extends Component {
constructor(props){
super(props);
this.state = {
accessToken: "",
listAccounts:[],
}
}
componentWillMount(){
this.loadAccountsData();
}
loadAccountsData(){
somerequest().then( (response) => {
this.setState({listAccounts: response});
// or whatever the data is that your accounts are
});
}
render() {
return (
<Content>
{this.state.listAccounts.map( (Account) => <Account accountData={Account} />)}
</Content>
)
}
}
For me, this issue was happening because I think Hot Reloading didn't build with the new state after I added. Manually reloading the iOS simulator fixed the issue for me.