I retrieve an array of data through fetch from an API. In my React Component, when I use mapStateToProps and .map(), I am able to display the contents of the array. However, if I try to get just one element from the array like array[0], it keeps returning undefined.
/* HomePage class Component: Ascendent of Banner */
class HomePage extends Component {
componentWillMount() {
this.props.fetchMovies();
}
render() {
const movie = this.props.movies[0];
return (
<div>
<Banner movies={this.props.movies} movie={movie} />
<Movies movies={this.props.movies} />
</div>
);
}
}
HomePage.propTypes = {
fetchMovies: PropTypes.func.isRequired,
movies: PropTypes.array.isRequired
};
const mapStateToProps = state => ({
movies: state.movies.movies
});
export default connect(
mapStateToProps,
{ fetchMovies }
)(HomePage);
/* Banner class Component: Descendent of HomePage */
class Banner extends Component {
render() {
const movieList = this.props.movies.map(movie => {
return <li>{movie.title}</li>;
});
return (
<div style={styles.BannerContainer}>
<div style={styles.Banner}>
<div style={styles.BannerText}>
<h1 style={styles.BannerTextHeader}>{this.props.movie.title}</h1>
<p style={styles.BannerTextParagraph}>
Arthur Curry learns that he is the heir to the underwater kingdom
of Atlantis, and must step forward to lead his people and be a
hero to the world.
</p>
<ul>{movieList}</ul>
<Button content={"Check It Out"} />
</div>
<div style={styles.BannerImage} />
<div style={styles.BannerOverlay} />
</div>
</div>
);
}
}
export default Banner;
I expect this.props.movie.title to equal this.props.movies[0].title, but the actual output is an error saying cannot get title of undefined.
The reason is that this.props.movies is undefined on first render )until you make the call to fetchMovies).
Consider checking if it exists first like this:
class HomePage extends Component {
componentWillMount() {
this.props.fetchMovies();
}
render() {
if (this.props.movies && this.props.movies[0]) {
const movie = this.props.movies[0];
return (
<div>
<Banner movies={this.props.movies} movie={movie} />
<Movies movies={this.props.movies} />
</div>
);
} else {
<div>Loading...</div>;
}
}
}
Why don't you access
{this.props.movie.title}
Like
{this.props.movie[0].title}
Seems more logical to me. And this might be the solution.
correct me if i am wrong.
And could you also console.log {this.props.movie}
Initially movies may be empty array and since you are accessing zero index position you should check it’s length before accessing zero index.
Change
const movie = this.props.movies[0];
To
if(this.props.movies.length){
const movie = this.props.movies[0];
console.log(movie);
}
Since movies is always an array so checking directly it’s length will resolve the issue
Related
I'm super new to react, this is probably a terrible question but I'm unable to google the answer correctly.
I have a component (CogSelector) that renders the following
import React from "react"
import PropTypes from "prop-types"
import Collapsible from 'react-collapsible'
import Cog from './cog.js'
const autoBind = require("auto-bind")
import isResultOk from "./is-result-ok.js"
class CogSelector extends React.Component {
constructor(props) {
super(props)
this.state = {
docs: null,
loaded: false,
error: null
}
autoBind(this)
}
static get propTypes() {
return {
selectCog: PropTypes.func
}
}
shouldComponentUpdate(nextProps, nextState){
if (nextState.loaded === this.state.loaded){
return false;
} else {
return true;
}
}
componentDidMount() {
fetch("/api/docs")
.then(isResultOk)
.then(res => res.json())
.then(res => {
this.setState({docs: res.docs, loaded: true})
}, error => {
this.setState({loaded: true, error: JSON.parse(error.message)})
})
}
render() {
const { docs, loaded, error } = this.state
const { selectCog } = this.props
if(!loaded) {
return (
<div>Loading. Please wait...</div>
)
}
if(error) {
console.log(error)
return (
<div>Something broke</div>
)
}
return (
<>
Cogs:
<ul>
{docs.map((cog,index) => {
return (
<li key={index}>
<Cog name={cog.name} documentation={cog.documentation} commands={cog.commands} selectDoc={selectCog} onTriggerOpening={() => selectCog(cog)}></Cog>
</li>
// <li><Collapsible onTriggerOpening={() => selectCog(cog)} onTriggerClosing={() => selectCog(null)} trigger={cog.name}>
// {cog.documentation}
// </Collapsible>
// </li>
)
})}
{/* {docs.map((cog, index) => { */}
{/* return ( */}
{/* <li key={index}><a onClick={() => selectCog(cog)}>{cog.name}</a></li>
)
// })} */}
</ul>
</>
)
}
}
export default CogSelector
the collapsible begins to open on clicking, then it calls the selectCog function which tells it's parent that a cog has been selected, which causes the parent to rerender which causes the following code to run
class DocumentDisplayer extends React.Component{
constructor(props) {
super(props)
this.state = {
cog: null
}
autoBind(this)
}
selectCog(cog) {
this.setState({cog})
}
render(){
const { cog } = this.state
const cogSelector = (
<CogSelector selectCog={this.selectCog}/>
)
if(!cog) {
return cogSelector
}
return (
<>
<div>
{cogSelector}
</div>
<div>
{cog.name} Documentation
</div>
<div
dangerouslySetInnerHTML={{__html: cog.documentation}}>
</div>
</>
)
}
}
export default DocumentDisplayer
hence the cogSelector is rerendered, and it is no longer collapsed. I can then click it again, and it properly opens because selectCog doesn't cause a rerender.
I'm pretty sure this is just some horrible design flaw, but I would like my parent component to rerender without having to rerender the cogSelector. especially because they don't take any state from the parent. Can someone point me to a tutorial or documentation that explains this type of thing?
Assuming that Collapsible is a stateful component that is open by default I guess that the problem is that you use your component as a variable instead of converting it into an actual component ({cogSelector} instead of <CogSelector />).
The problem with this approach is that it inevitably leads to Collapsible 's inner state loss because React has absolutely no way to know that cogSelector from the previous render is the same as cogSelector of the current render (actually React is unaware of cogSelector variable existence, and if this variable is re-declared on each render, React sees its output as a bunch of brand new components on each render).
Solution: convert cogSelector to a proper separated component & use it as <CogSelector />.
I've recently published an article that goes into details of this topic.
UPD:
After you expanded code snippets I noticed that another problem is coming from the fact that you use cogSelector 2 times in your code which yields 2 independent CogSelector components. Each of these 2 is reset when parent state is updated.
I believe, the best thing you can do (and what you implicitly try to do) is to lift the state up and let the parent component have full control over all aspects of the state.
I solved this using contexts. Not sure if this is good practice but it certainly worked
render() {
return (
<DocContext.Provider value={this.state}>{
<>
<div>
<CogSelector />
</div>
{/*here is where we consume the doc which is set by other consumers using updateDoc */}
<DocContext.Consumer>{({ doc }) => (
<>
<div>
Documentation for {doc.name}
</div>
<pre>
{doc.documentation}
</pre>
</>
)}
</DocContext.Consumer>
</>
}
</DocContext.Provider>
)
}
then inside the CogSelector you have something like this
render() {
const { name, commands } = this.props
const cog = this.props
return (
//We want to update the context object by using the updateDoc function of the context any time the documentation changes
<DocContext.Consumer>
{({ updateDoc }) => (
<Collapsible
trigger={name}
onTriggerOpening={() => updateDoc(cog)}
onTriggerClosing={() => updateDoc(defaultDoc)}>
Commands:
<ul>
{commands.map((command, index) => {
return (
<li key={index}>
<Command {...command} />
</li>
)
}
)}
</ul>
</Collapsible>
)}
</DocContext.Consumer>
)
}
in this case it causes doc to be set to what cog was which is a thing that has a name and documentation, which gets displayed. All of this without ever causing the CogSelector to be rerendered.
As per the reconciliation algorithm described here https://reactjs.org/docs/reconciliation.html.
In your parent you have first rendered <CogSelector .../> but later when the state is changed it wants to render <div> <CogSelector .../></div>... which is a completely new tree so react will create a new CogSelector the second time
I have a React.Component that renders references to others which are defined via const
Here is part of my code
const TodoList = ({data, remove}) => {
let source = data.map((todo) => {
return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
})
return (<ul>{source}</ul>)
}
export default class HomePage extends React.Component {
constructor(props) {
super(props);
console.log("Start home page")
this.state = {
data: []
}
this.getAllTasks = this.getAllTasks.bind(this);
}
render() {
return (
<div className={styles.content}>
<h1>Home Page</h1>
<p className={styles.welcomeText}>Thanks for joining!</p>
<button onClick={this.getAllTasks}>Request all tasks</button>
<button onClick={this.getSpecificTask}>Get specific task</button>
<button onClick={this.createTask}>Create task</button>
<button onClick={this.editTask}>Edit task</button>
<button onClick={this.deleteTask}>Delete task</button>
<div id="container">
<TodoForm addTodo={this.addTodo.bind(this)} />
<TodoList
todos={this.state.data}
remove={this.handleRemove.bind(this)} />
</div>
</div>
);
}
}
I am facing issues after adding TodoForm and TodoListto the render. First of them is inner state of TodoList is undefined. By being more specific:
page.js:85 Uncaught TypeError: Cannot read property 'map' of undefined
at TodoList (page.js:85)
First of all I haven't committed enough time to find out how that's all work under the hood (have a different main tech stack and tight deadline for this app). Source code shows data is obtain via autogenerated reference _ref3 that is passed from outer class.
I you see outer class defines and init the data structure, so data should be defined.
Do you see the issue I missed here?
Okay you are not destructuring properly
do it as this
const TodoList = ({todos, remove}) => {
let source = todos.map((todo) => {
return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
})
return (<ul>{source}</ul>)
}
You are passing prop as todos and destructuring it as data
Hope it helps
As other solution/answer mentioned you were not destructuring properly thus you encountered the error.
Apart from above solution you can alias it for local scope name data as below:
const TodoList = ({todos: data, remove}) => { // <---------------------
^^^^^^^^^^^
let source = data.map((todo) => {
return (<TodoItem todo={todo} id={todo.id} remove={remove}/>)
})
return (<ul>{source}</ul>)
}
You are getting an object in TodoList which happens to be your props which you are trying to destructure which has to match key by key but you can alias is using : for local name scoping generalized purpose.
i am trying to render the length of the state to the screen and it keeps telling me, cannot read length property of undefined. When i tried logging the value of state to the console, at first it was undefined, after running a search the value updated and there were 5 items in the array. problem now is when it updates, it does not update on the screen, either that or it flat out crashes.
export default class App extends Component {
state={
vidoes:[]
};
onTermSubmit = async term =>{
const response = await youtube.get('/search',{
params:{
q:term,
}
});
this.setState({videos:response.data.items})
};
render() {
console.log(this.state.videos)
return (
<div className="ui container">
<SearchBar onFormSubmit={this.onTermSubmit}/>
{this.state.vidoes.length}
</div>
)
}
The ultimate goal is to have the length of state render on the screen and now that it is being described as undefined, it will be impossible to loop throght it.
There are some typo videos. Please change it to this.state.videos.length in render method.
render() {
console.log(this.state.videos)
return (
<div className="ui container">
<SearchBar onFormSubmit={this.onTermSubmit}/>
{this.state.videos.length}
</div>
)
}
Hope this will work for you.
Try This,
export default class App extends Component {
state={
videos:[]
};
onTermSubmit = async term =>{
const response = await youtube.get('/search',{
params:{
q:term,
}
});
this.setState({videos:response.data.items})
};
render() {
console.log(this.state.videos)
return (
<div className="ui container">
<SearchBar onFormSubmit={this.onTermSubmit}/>
{this.state.videos.length}
</div>
)
}
I keep getting this error: TypeError: robots.map is not a function.
I reviewed the code several times can't find the bug.
import React from 'react';
import Card from './Card';
// import { robots } from './robots';
const CardList = ({ robots }) => {
return(
<div>
{
robots.map((user, i) => {
return (
<Card
key={i}
id={robots[i].id}
name={robots[i].name}
email={robots[i].email}
/>
);
})
}
</div>
);
}
export default CardList;
App.js
import React, { Component } from 'react';
import CardList from './CardList';
import SearchBox from './SearchBox';
import { robots } from './robots';
class App extends Component {
constructor(){
super()
this.state = {
robots:'robots',
searchfield: ''}
}
render(){
return(
<div className='tc'>
<h1 className=''>RoboFriends</h1>
<SearchBox />
<CardList robots={this.state.robots}/>
</div>
);
}
}
export default App;
I updated the initial code with App.js that calls CardList.
I recently started learning react and I hope to develop an app that lets you search for a user which instantly filters and render the name typed in the search box.
You pass robots as props from App internal state and not from the imported file.
Set the state of App component from the imported robots file
import { robots } from './robots'
class App extends Component {
constructor() {
super()
this.state = {
robots,
searchfield: ''
}
}
render() {
return (
<div className='tc'>
<h1 className=''>RoboFriends</h1>
<SearchBox />
<CardList robots={this.state.robots}/>
</div>
);
}
}
Also using index as React key is a bad practice, You have a unique id in every robot object so use it as key, also read about the map function and how to access the iterated elements
const CardList = ({ robots }) => (
<div>
{robots.map(robot => (
<Card
key={robot.id}
id={robot.id}
name={robot.name}
email={robot.email}
/>
))}
</div>
);
You're passing a string to be mapped, instead pass the robots list of objects and see the result.
These kind of errors are the result of passing something other than a list to be mapped
I'm super new to React and I have two components I want to toggle between based on a user click. I've went about it by creating a 'currentView' state and using that to set/update what the user should be looking at, but when I try to get the components to display it throws tag errors. Here's my code:
class App extends Component {
constructor(props){
super(props);
this.state={
currentView: "Welcome",
};
}
goTrack() {
this.setState({currentView: "Tracker"});
console.log(this.state.currentView);
}
goReview() {
this.setState({currentView: "Review"});
console.log(this.state.currentView);
}
render() {
return (
<div className="App">
<aside>
<nav>
<ul>
<li onClick={()=>this.goTrack()}> Tracker </li>
<li onClick={()=>this.goReview()}> Review </li>
</ul>
</nav>
</aside>
<main>
<this.state.currentView/>
</main>
</div>
);
}
}
export default App;
My question is how should I go about dynamically selecting components to display without re-rendering the entire DOM?
One way to solve this is to use the current state to match a key in an object containing the component you want in a certain state.
constructor() {
super()
this.state = {
current: 'welcome',
}
}
render() {
const myComponents = {
welcome: <Welcome />,
tracker: <Tracker />,
}
const CurrentComponent = myComponents[this.state.current]
return (
<CurrentComponent />
)
}
And when you change the state current with the value 'tracker', Tracker component will be rendered instead of Welcome component.
I am guessing Tracker and Review are two components you want to toggle based on value in this.state.currentView
In short this <this.state.currentView/> expects a component/html element.
one way to do what you want to do would be to do this instead.
<main>
{ this.state.currentView == 'Review' && (
<Review />
)}
{ this.state.currentView == 'Tracker' && (
<Tracker />
)}
</main>
Option 1: Conditions
render() {
const { currentView } = this.state;
// I omit the other stuff to focus on your question
return (
<div>
{currentView === 'Welcome' && <Welcome />}
{currentView === 'Tracker' && <Tracker />}
{currentView === 'Review' && <Review />}
</div>
);
}
Option 2: Dynamic component
import Welcome from './Welcome';
import Review from './Review';
class App extends Component {
constructor(props) {
super(props);
this.state = {
current: Welcome,
};
}
// ... stuff ...
goTrack() {
this.setState(prevState => { ...prevState, current: Review });
}
// ... other stuff ...
render() {
# I rename it because React expects a component's name
# with a capital name.
const { current: Current } = this.state;
# As above, I put only relevant rendering
return <div><Current /></div>;
}
}
Option 3: Guess
And actually, looking at what you are trying to do, I'd suggest you have a look at react-router-dom.