I'm sure nothing is wrong with react-dropzone works great and when I drop a file, array shows in my console:
getInitialState() {
return{files: []}
},
onDrop(files) {
this.setState({files: files});
console.log(files);
},
render(){
var attachedFiles = this.state.files;
return(
{attachedFiles.map((file, idx) =>
<img key={idx} src={file.preview} />
)}
)
}
When two files are dropped, in console it shows as
>[File]
>[File]
But only the last file is shown. Am I not iterating correctly?
Edited:
I have noticed that my files state only shows one array no matter if I dropped more than one file.
As suggested in the comments, I think you'll need a return statement in your map function. Your render function also needs to return your data wrapped in a single parent node, something like:
render(){
var attachedFiles = this.state.files;
var imagesNodes = attachedFiles.map((file, idx) => {
return <img key={idx} src={file.preview} />;
});
return (
<div className="imagesList">
{imagesNodes}
</div>
);
}
Related
I have a code that kinda looks like this: (I'm omitting some things but...)
render() {
(bunch of props and state)
return (
<div>
<CustomTabs>
{this.renderTabs()}
</CustomTabs>
</div>
}
Where the renderTabs function looks like this:
renderTabs = () => {
const { apps } = this.props;
apps.filter(app => app?.id !== 'Dashboard').map((app, key) => {
return <CustomTab label={app.id} key={key} />;
});
}
According to some console logs, the filter and mapping is working, so the label and the key exists and are set properly. But the return of the function is undefined.
I note that I'm using MUI datatables to do this and that if I delete the function and add multiple by hand instead, it works properly.
Why is this happening? I have lots of code that looks like this and lots of render methods that call another function to help the rendering and they work without problem.
You need to return filtered items:
renderTabs = () => {
const { apps } = this.props;
return apps.filter(app => app?.id !== 'Dashboard').map((app, key) => {
return <CustomTab label={app.id} key={key} />;
});
}
You need to return the result of filter
I've got a list of products to render. I also have an array of keywords that are used to exclude products from being rendered.
I am looping over the array of keywords and checking if the product title contains any of the entries. It then returns a boolean.
The following code does not work. The console.log works and reflects the result but nothing is rendered.
function inExcludes(product, excludedItems) {
excludedItems.forEach( item => {
if (product.includes(item)) {
console.log(true);
return true;
} else {
console.log(false);
return false;
}
})
}
export function CardsFiltered(props) {
const cards = props.items.map((product) => {
if (inExcludes(product.title, props.excludedItems) === false)
return (
<CardValidation
key={product.id}
id={product.id}
product={product}
/>
)
})
return (
<>
{cards}
</>
);
}
But if I set a variable as a boolean, switch that variable if the condition is true, and then return that variable, it works and my cards are rendered (code below).
Is anyone able to shed light on this? Because I can't figure it out.
function inExcludes(product, excludedItems) {
let result = false;
excludedItems.forEach( item => {
if (product.includes(item)) {
result = true;
}
})
return result;
}
export function CardsFiltered(props) {
const cards = props.items.map((product) => {
if (!inExcludes(product.title, props.excludedItems))
return (
<CardValidation
key={product.id}
id={product.id}
product={product}
/>
)
})
return (
<>
{cards}
</>
);
}
Your first implementation of 'inExcludes' isn't returning a boolean (true/false). It's just executing the 'forEach' on each item in the excludedItems array. The return within that loop doesn't return from the function as a whole.
So, as it effectively returns 'undefined' your render decides not to render anything.
Here's something that does what you're after (simplified a bit):
https://codesandbox.io/s/awesome-mcclintock-hkkhsi?file=/src/App.js
Hi all I have following code: my code
I am receiving some response from backend.
I am trying to get all images from imagesData and show in ImageComponent component.
I am using map function in my main component in this way:
{!!res &&
res.map((data) =>
{
return <ImageComponent key={data.publicId} {...data} />;
})}
and here is my ImageComponent component:
const ImageComponent = ({ img }) => {
return (
<div>
<img src={img} alt="pic" />
</div>
);
};
But something went wrong please help me to resolve this problem.
You're applying the map method on res, which is an object not an array. Map method is made for Arrays. All you have to do is access the image array present in you Object and then, apply the map.
Read about map here
return (
<div className="App">
{!!res &&
res.imagesData.map((data) => {
return <ImageComponent key={data.publicId} {...data} />;
})}
</div>
);
In your ImageComponent, you have to pass url in your destructured props as it is the url property that contains the actual url of your image
const ImageComponent = ({ url }) => {
return (
<div>
<img src={url} alt="pic" />
</div>
);
};
res is not an array.
From what I see I suppose you wanted to do this
{!!res &&
res.imagesData.map((data) =>
{
return <ImageComponent key={data.publicId} {...data} />;
})}
As the title says, I can not figure out why the return of a function doesn't show on screen.
The object words.First.wordsdata is holding key-value pairs
import React from "react";
const WordList = ({ words }) => {
return (
<div>
{ words &&
Object.entries(words.First.wordsdata).forEach(([key, value]) => {
return(<div>{key} - {value}</div>);
})
}
</div>
);
};
export default WordList;
If I change the return to log it out, then
this one does show everything correctly in dev tools
return(console.log(key, value));
To give a full view, this is the file that calls the component
class Words extends Component {
render() {
//console.log(this.props)
const { words, auth } = this.props;
if (!auth.uid) return <Redirect to="/" />;
return (
<div>
<WordList words={words} />
</div>
);
}
}
I tried changing the return to simple HTML and It still doesn't show anything
Thank you for the answers, indeed changing .forEach to .map did the trick.
I am having trouble understanding why I cannot get images to show up in my components. I have a boolean which indicates loading, and an array that gets filled async. When I finish, I set the boolean and the component re renders. Now, I want to create a card for each item in the array and put in in a card deck (this is from react-bootstrap if that wasn't obvious). I can do this with any given boolean and array, but not with the boolean and arrays created with React.useState... Why is that and how should I go about fixing this?
I encountered this problem quite a few hours ago, and have tracked down its source to this minimal working example that still reflects what I am trying to do, but I am unsure of what to do from here.
function TestCard() {
return (
<Card>
<Card.Img src="holder.js/200x200" />
</Card>
);
}
I am trying to render the following component:
function MainComponent() {
const [boolState, setBoolState] = React.useState(false);
const [arrayState, setArrayState] = React.useState([]);
React.useEffect(() => {
setTimeout(() => {
setBoolState(true);
setArrayState([1,2,3]);
}, 2000);
});
return (
<>
{/* This works */}
{
true &&
<CardDeck>
{
[1,2,3].map(_ => {
return (
<TestCard />
);
})
}
</CardDeck>
}
{/* This doesn't, why? */}
{
boolState &&
<CardDeck>
{
arrayState.map(_ => {
return (
<TestCard />
);
})
}
</CardDeck>
}
</>
);
}
Code sandbox