I'm learning React and calling Dog API. I got it to work for rendering an image, but when I tried to render multiple images, it doesn't work. For context, the API call link is https://dog.ceo/api/breeds/image/random/5 where "/5" specifies the number of images. I'm pretty sure that the state is being set because when I put console.log instead of setting the state, it's giving me the JSON with the urls to the images. I'm getting back an error message of "Cannot read property 'map' of undefined".
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount() {
fetch("https://dog.ceo/api/breeds/image/random/5")
.then(response => response.json())
.then(json => this.setState({data: json}));
}
render() {
return (
<div>
{this.state.data.message.map((item, id) => (
<img src={item} key={id} alt="dog" />
))}
</div>
)
}
}
export default App;
this.state.data.message doesn't exist when the component first loads. Instead, you've set this.state.data to an empty array, then later replace it with an object. It's best to keep the types consistent.
The simplest change is probably just to set up this.state.data.message to be an empty array:
constructor(props) {
super(props);
this.state = {
data: {
message: []
},
}
}
From there, taking note of the asynchronous nature of the AJAX operation, you might also consider implementing a "loading state" for when there are no images to display. (Perhaps even a meaningful empty state for when the operation has completed and there are still no images? An error state? etc.)
Check if the data has been manipulated or not. If not yet set the state by the API call then there is nothing this.state.data.message.
Note that, the ?. sign is called Optional Chaining. Optional chaining is used to check if an object has it's key or not in the deep level & also the Optional Chaining does not have the IE support.
render() {
return (
<div>
{this.state.data?.message?.length > 0 && this.state.data.message.map((item, id) => (
<img src={item} key={id} alt="dog" />
))}
</div>
);
}
It happened because when the page initially rendered, the data state is just an empty array. You have to add ? as an optional chaining which basically 'ignore' the error when you are accessing a property of something undefined.
Your code should be something like this
render() {
return (
<div>
{this.state.data.message?.map((item, id) => (
<img src={item} key={id} alt="dog" />
))}
</div>
)
}
So when the data state is empty it would not render anything.
Another way to do it is to check whether the state has content with
render() {
return (
<div>
{this.state.data.message &&
this.state.data.map((item, id) => (
<img src={item} key={id} alt="dog" />
))}
</div>
)
This code will check whether the data.message is truthy and will render the component, otherwise it will render nothing. More info here
}
Related
I'm using a thing called react-firebase-js to handle firebase auth, but my understanding of react and of the provider-consumer idea is limited.
I started with a built a very big JSX thing all at the top level, and that works without warnings. But when I try to break it into components, I got the warning shown in the title and a few others.
This works without warning...
// in App.js component
render() {
return (
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<FirebaseAuthConsumer>
{({ isSignedIn, user, providerId }) => {
if (isSignedIn) {
return (
// ui for signed in user
);
} else {
if (this.state.confirmationResult) {
return (
// ui to get a phone number sign in
);
} else {
return (
// ui to verify sms code that was sent
);
}
}
}}
</FirebaseAuthConsumer>
</header>
);
}
But this, better design, I thought, generates errors/warnings...
// in App.js component
render() {
return (
<MuiThemeProvider>
<FirebaseAuthProvider {...config} firebase={firebase}>
<div className="App">
<IfFirebaseAuthed>
<p>You're authed buddy</p>
<RaisedButton label="Sign Out" onClick={this.signOutClick} />
</IfFirebaseAuthed>
<IfFirebaseUnAuthed>
<Authenticater /> // <-- this is the new component
</IfFirebaseUnAuthed>
</div>
</FirebaseAuthProvider>
</MuiThemeProvider>
);
}
// in my brand new Authenticator component...
render() {
return (
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<FirebaseAuthConsumer>
{({ isSignedIn, user, providerId }) => {
if (isSignedIn) {
return (
<div>
<pre style={{ height: 300, overflow: "auto" }}>
{JSON.stringify({ isSignedIn, user, providerId }, null, 2)}
</pre>
</div>
);
} else {
if (this.state.confirmationResult) {
return (
// ui to get a phone number sign in
);
} else {
return (
// ui to verify an sms code that was sent
);
}
}
}}
</FirebaseAuthConsumer>
</header>
);
}
The errors/warnings look like this...
[Error] Warning: React does not recognize the isSignedIn prop on a
DOM element. If you intentionally want it to appear in the DOM as a
custom attribute, spell it as lowercase issignedin instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
[Error] Warning: React does not recognize the providerId prop on a
DOM element. If you intentionally want it to appear in the DOM as a
custom attribute, spell it as lowercase providerid instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
[Error] Error: Unable to load external reCAPTCHA dependencies!
(anonymous function) (0.chunk.js:1216) [Error] Error: The error you
provided does not contain a stack trace.
Am I misunderstanding how to use provider-consumers, or is there an error in the react-firebase code, or am I doing some other thing wrong? Thanks.
Presumably, this line must be the culprit:
<FirebaseAuthProvider {...config} firebase={firebase}>
Your config object currently holds fields isSignedIn and providerId, and you must be sending those down to children components, and ultimately to a DOM element. Try removing those fields from the object before you send them down:
const { providerId, isSignedIn, ...authProviderConfig } = config
That way, your object authProviderConfig will not hold the providerId or isSignedIn attributes.
Even better, you can rebuild the configuration object explicitly to avoid any further confusion:
const authProviderConfig = { /* The fields from config FirebaseAuthProvider actually needs */ }
You should also check your FirebaseAuthProvider component to see how it's using those props, and avoid spreading them down to DOM elements.
Related documentation: https://reactjs.org/warnings/unknown-prop.html
This warning appears because you passed a prop on a component that it is not valid.
For example, this
<Component someUnknowprop='random-text' />
will trigger the warning. In order to get rid of the warning you should find out where that warning is coming from. The stack trace should give you a hint.
Adding $ to the prop name fixed it for me.
.tsx file:
<Wrapper $offset={isOffset}>
And on the .style.tsx file:
height: ${({ $offset }) => ($offset ? 'calc(100% + 20px)' : '100%')};
In my case, I was getting this error when using the IfFirebaseAuthed component from react-firebase.
You must make sure that you return a function inside of this component.
I changed this:
<IfFirebaseAuthed>
... My authenticated code here ...
</IfFirebaseAuthed>
To this:
<IfFirebaseAuthed>
{() => (
... My authenticated code here ...
)}
</IfFirebaseAuthed>
And this issue went away.
Check your custom props
In my case, I created a reusable hide component. (Initially, it mounts a button with text masked(******) on clicking this button the key( API key ) will be revealed which is a CopyToClipboard component )
const [hide, setHide] = useState(true);
If hide is true, I am rendering a Button ( spreading all the props )
<Button onClick={() => setHide(false)} {...props}>
******
</Button>
When this button is Clicked hide is false and I am rendering a CopyToClipboard component.
<CopyToClipboard
{...props}
>
{value}
</CopyToClipboard>
The Problem
In the above scenario, I am spreading {...props} to both Button and CopyToClipboard components.
But some props of CopyToClipboard are not compatible with that of Button's.
Fix
So at the top of the component destructure the props that are specific to a component (here CopyToClipboard).
Now safely spread the rest of the props to both the components and pass the new prop separately ( to CopyToClipboard component )
const {onCopy, ...restProps} = props
<Button onClick={() => setHide(false)} {...restProps}>
******
</Button>
<CopyToClipboard
onCopy={onCopy}
{...props}
>
{value}
</CopyToClipboard>
I am kinda new to react and to the webitself.
this is my render function
render() {
const {repositories} = this.props
return (
<div className='mt4 bt b--black-20 boardingbox scrollarea-content' style={{overflow: 'scroll', height: '100vh'}}>
{
repositories.map((repo, index) => {
console.log(repo.name)
return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>
})
}
</div>
)
}
The repositories is changing the way I want, but for some reason the its not get re-rendered. I passing the repositiores property from the parent.
The first time I render it (click to the search button, get a response from the server, and set the repo array), its working fine. But at the 2nd search, when there is something in the array, its not working properly, and not re-render.
UPDATE:
The parent's render / onClick
render() {
const {repositories} = this.state
return (
<div className='w-third navpanel br b--black-20'>
<SearchBar onClick={this.onClick} onChange={this.onChange}/>
<RepoList repositories={repositories}/>
</div>
//<NewNote />
//<Tags />
//<NoteList />
);
}
onClick = (event) => {
const {searchTerm} = this.state
let endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm;
fetch(endpoint)
.then(blob => blob.json())
.then(response => {
if(response.items)
this.setState({ repositories: response.items });
})
}
UP-UPDATE:
Search Comp:
constructor({onClick, onChange}) {
super()
this.onClick = onClick
this.onChange = onChange
this.state = {
imageHover: false
}}
render() {
return (
<div className='flex items-center justify-between bb b--black-20'>
<div className='ma2 inputContainer w-100'>
<input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.onChange}/>
</div>
<div className='mr2'>
<div className='boardingbox pointer contain grow'>
<img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
onMouseOver={()=>this.setState({imageHover: true})}
onMouseOut={()=>this.setState({imageHover: false})}
onClick={this.onClick}/>
</div>
</div>
</div>
)}
first responde
second responde
and I am really ashamed that I could screw up like this.
So basicly the problem was:
return <Note name={repo.name} desc={repo.name} key={index} onClick={ this.handleClick.bind(this) }/>
So I was as stupid to use INDEX as a KEY so I could not add again the same key to the array.
Thanks anyway guys! :)
The root cause most probably is due to error in function binding.
In your SearchComponent you are using the "props" to create function bindings in the contructor. This can cause your SearchComponent to refer to wrong instance of the functions for onClick and onChange. Would suggest referring to the official documentation for more details.
you do not need to rebind the functions in your SearchComponent, you can just use the functions received in props.
<input className='pa1 pl4 boardingbox w-100 input-reset ba b--black-20 br4 black-50 f6' placeholder='repos' type="text" onChange={this.props.onChange}/>
<!-- snipped other irrelevant code -->
<img src={(this.state.imageHover) ? NoteImageOnHover : NoteImage} alt=''
onMouseOver={()=>this.setState({imageHover: true})}
onMouseOut={()=>this.setState({imageHover: false})}
onClick={this.props.onClick}/>
Why could be happening to cause this behavior
Remember, constructor is only called once the component instance is being constructed, once it has been created and remains alive, React lifecycles take over.
So, when you first render your screen, the component is created and since there is only 1 of everything, it kind of works.
When you run your first search: onChange/onClick callbacks modify the state of the parent component. Which then calls render on the parent component.
At this point, it is possible that your SearchComponent maybe holding on to the wrong instance of the call back methods, which would thus not set state on the parent and thus not force re-render.
Additional Notes on your constructor
Normally you shouldn't refer to props in your constructor, but if you need to, then you need to have it in the format below. Here are the relevant docs:
constructor(props) {
super(props);
// other logic
}
I am building a React JS application.
So, I want to print something over and over from an array, but it has only two elements. I am using a custom package called 'Typist' that enables me to give a 'Typing' kind of animation with whatever I type.
I am basically trying to type 'Hi', erase it and then type 'Ola' and then erase it and then start with 'Hi' again and keep repeating this pattern.
Here's what I have right now:
let greetings=["Hi","Ola"];
render() {
return(
<div className={"TypistExample-header"} >
<Typist className={"TypistExample"}>
<Typist.Delay ms={1000} />
{
greetings.map(i =>{
return <li><h1>{i}</h1>
{<Typist.Backspace count={12} delay={1000} />}
</li>
})
}
</Typist>
P.S I did find a way to do it a few times,still not infinite, by doing this:
let greetings=["Hi","Ola"];
var actualTyping= greetings.map(i =>{
return <li><h1>{i}</h1>
{<Typist.Backspace count={12} delay={1000} />}
</li>
});
var rows=[];
for(var i=0;i<10;i++){
rows.push(actualTyping)
}
return(
<div className={"TypistExample-header"} >
<Typist className={"TypistExample"}>
<Typist.Delay ms={1000} />
{rows}
</Typist>
</div>
);
You can use Typist's onTypingDone property to restart the animation. Pass the text array via state to Typist. When the typing is done, clear the state, which will remove the rendered Typist, then restore the original text, and it will be typed again (sandbox).
Note: setState is asynchronous, and it batches updates together or defers them to a later time. In this case we want to clear the text (set null), and only after the view is updated repopulate the text. To do so, we can use the 2nd param of setState, a callback that is fired only after the update (null) has been applied.
const greetings = ["Hi", "Ola"];
class ContType extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text
};
}
onTypingDone = () => {
this.setState(
{
text: null
},
() =>
// run this callback after the state updates
this.setState({
text: this.props.text
})
);
};
render() {
const { text } = this.state;
return (
text && (
<Typist onTypingDone={this.onTypingDone}>
<Typist.Delay ms={1000} />
{text.map((i, index) => {
return (
<div key={index}>
<h1>{i}</h1>
{<Typist.Backspace count={12} delay={1000} />}
</div>
);
})}
</Typist>
)
);
}
}
render(<ContType text={greetings} />, document.getElementById("root"));
Better and simple solution would be creating a constant integer array of your choice and then mapping carried out using the value specified for integer.
const a = [1...10000]
let greetings = ["hi", "hello"]
render(){
return(
a.map( i => {
<h1>greeting[0] - greeting[1]</h1>
})
)
}
And always, keep in mind that infinite loop cause react engine to break down. Good practice is to specify an integer value for mapping for such cases.
Working on a project in React using a MongoDB database. I am trying to access key values in objects, but I get an error when I try to access them. I can access the objects themselves, but as soon as I use dot notation, React crashes and says TypeError: Cannot read property 'title' of undefined. The only instance I can get the data is when I console log in my fetchData() function before it goes through componentDidMount.
class TimelineContainer extends Component {
constructor(props){
super(props)
this.state = {
lifeEvents: [],
currentUser: auth.currentUser
}
}
componentDidMount(){
this.fetchData()
}
fetchData(){
LifeEventModel.all().then( (res) => {
this.setState ({
lifeEvents: res.lifeEvents,
uid: res.lifeEvents.uid,
currentUser: auth.currentUser
})
console.log(this.state.lifeEvents[0].title)
})
}
Link to database backend hosted on heroku. Link to my github repo.
render(){
console.log(this.state.lifeEvents[0].title)
console.log(this.state.lifeEvents);
return (
<div className='timelineContainer'>
{
(this.state.currentUser != null) ?
<div>
<CreateLifeEventForm
currentUser= {this.state.currentUser}
onCreateLifeEvent={this.createLifeEvent.bind(this)} />
<Timeline
currentUser= {this.state.currentUser}
lifeEvents={this.state.lifeEvents}
onDeleteLifeEvent={this.deleteLifeEvent.bind(this)}
onUpdateLifeEvent={this.updateLifeEvent.bind(this)}
/>
</div> :
<section className="col-md-4 col-sm-12 add-event">Log in to add a life event</section>
}
</div>
)
}
}
render method above. First console log throws the error. Second one does not.
it is possible that since you are not fetching your data asynchronously, the initial result this.state.lifeEvents will be null. so you have to first check for the null value until react updates the state and re-renders.
try this out:
renderView = () => {
return (this.state.lifeEvents === null)? <div>Loading...</div> :
(<div>
<CreateLifeEventForm
currentUser= {this.state.currentUser}
onCreateLifeEvent={this.createLifeEvent.bind(this)} />
<Timeline
currentUser= {this.state.currentUser}
lifeEvents={this.state.lifeEvents}
onDeleteLifeEvent={this.deleteLifeEvent.bind(this)}
onUpdateLifeEvent={this.updateLifeEvent.bind(this)}
/>
</div>)
};
render(){
return (
<div className='timelineContainer'>
{
(this.state.currentUser != null) ? this.renderView() :
<section className="col-md-4 col-sm-12 add-event">Log in to add a life event</section>
}
</div>
)
}
I just started to learn React and I am trying to figure out how to find a specific value I am looking for. Just like you have the each.do method in Ruby and you can iterate through an array, I'm trying to do that with React.
class Gallery extends React.Component {
render () {
// debugger;
return (
<div>
<img> {this.props.gallery.thumbnail_url} </img>
</div>
)
}
}
I am trying to access the thumbnail._url and when using the debugger, I am not able to access all the objects and images. I thought of this.props.gallery.object.thumbnail_url and other ideas but I am not really sure of the best way!
Use Array.prototype.map() to map the data to react elements. Not that elements rendered in a loop require a unique identifier (keys), to make rerendering list more performant.
class Gallery extends React.Component {
render () {
const { gallery = [] } = this.props; // destructure the props with a default (not strictly necessary, but more convenient)
return (
<div>
{
gallery.map(({ id, thumbnail_url }) => (
<img key={ id } src={ thumbnail_url } />
))
}
</div>
)
}
}
You can do something like this:
class Gallery extends React.Component {
render () {
// initialize 'images' to empty array if this.props.gallery is undefined
// other wise 'images.map' will throw error
const images = this.props.gallery || [];
return (
<div>
{images.map((image, index) => <img src={image.thumbnail_url} key={index} />)}
</div>
)
}
}
You may have noticed the prop key={index}. If you omit that, you will see a warning:
Each child in an array or iterator should have a unique "key" prop
Actually it is not passed to the component as prop but is used by React to aid the reconciliation of collections. This way React can handle the minimal DOM change.