score:0
you are only rendering 1 <card>
when defining the <cardview>
component.
assuming noderesponse.imagefiles
is an array of files, you should have something like the following:
class app extends component {
constructor(props) {
super(props);
this.state = {
noderesponse: ''
}
}
getfilestatusfromnode = (data) => {
this.setstate({noderesponse: data})
}
render() {
let cardview
if(this.state.noderesponse !== '') {
cardview = this.state.noderesponse.imagefiles.map(file => (
<card
key={image.filename}
name={image.filename}
image={image.buffer} />
)
)}
return (
<div classname="app tc">
{ cardview }
</div>
)
}
}
score:0
try with
class app extends component {
constructor(props) {
super(props);
this.state = {
noderesponse: []
}
}
getfilestatusfromnode = (data) => {
// here you merge the previous data with the new
const noderesponse = [...this.state.noderesponse, data];
this.setstate({ noderesponse: noderesponse });
}
render() {
return (<div classname="app tc">
{this.state.noderesponse.map(n => <card key={n.filename} name={n.filename} image={n.buffer} />)}
</div>);
}
}
and in your child component
class card extends purecomponent {
render() {
const { src } = this.props;
return (<a style={{width: 200, height: 250}} classname="tc">
<div id='images'>
<img style={{width: 175, height: 175}} classname='tc' alt='missing' src={`data:image/jpeg;base64, ${src}`}/>
</div>
</a>);
}
}
Source: stackoverflow.com
Related Query
- Cannot set multiple images
- Cannot set state of multiple checkboxes?
- TypeError during Jest's spyOn: Cannot set property getRequest of #<Object> which has only a getter
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- A module cannot have multiple default exports
- Webpack - Error: Cannot define 'query' and multiple loaders in loaders list
- React-router: TypeError: Cannot set property 'props' of undefined
- How do I set multiple lines to my tooltip text for Material UI IconButton?
- How do I query multiple images with gatsby-image?
- Cannot set getState type to RootState in createAsyncThunk
- Cannot set useState hook value to opposite boolean
- How to set a test for multiple fetches with Promise.all using jest
- I cannot run multiple test files with Jest?
- react-select cannot set id
- React: Cannot set property 'lastEffect' of null
- How to set multiple values at once in react hook form using Typescript
- Cannot set padding to 0 on Material UI Button
- Cannot set property createElement of #<Object> which is only a getter
- Gatsby GraphQL query for multiple images
- Set multiple state values with React useState hook
- TypeError: Cannot set property '_eventListeners' of undefined
- Is there a generic way to set state in React Hooks? How to manage multiple states?
- Set multiple states in setState - React.js ES6
- error: Cannot set properties of undefined when setting the value of nested object
- react warning cannot set state when using promises
- how to fix this Error Cannot use the same canvas during multiple render() operations
- React redux: Cannot set on an immutable record
- Import multiple images on React
- TypeError: Cannot set property 'reactRoot' of undefined
- client.watchQuery cannot be called with fetchPolicy set to "standby" -- Error thrown on page load from useLazyQuery
More Query from same tag
- React Intl, how to add a number in a message?
- How can I redirect to a route depending on the outcome of an action
- How do I properly changing response data in RTK Query?
- React delegate normal event handler to document, how about a binded function?
- onChange function console.log is one character short
- reactjs - phantomjs-node issues with "fs" module
- change date from flat to tree
- React DataTable fails to change the font-size
- Global beforeEach and afterEach Jest in React
- React Routes problem with Tags other than Route
- On Docusaurus, how do I disable the external link SVG?
- TypeError: Cannot call a class as a function (React/Redux)
- React display not updating correctly
- React - onClick returns 'null undefined' when Clicking on <li>
- React widgets within text (static HTML)
- Reactjs - Data is being fetched multiple times
- Can a website work with both simple JavaScript and React
- Jest React: How to mock window eventListener set in componentDidMount
- How do I limit the max number of item rows in a DetailsList?
- make background of label change on checked state of input
- MUI TextField label (with custom NumberFormat) displayed on top of value
- Button Click In React
- How to design collapsible list with in reactjs component with plus minus toggle along with the title text
- useState with value that may be null
- React table from data remove row not refresh
- How to handle global state data into deeply nested components in Redux?
- Why does Reagent render JSON in three ways?
- Attempted import error: 'GoogleAuthProvider' is not exported from 'firebase/auth'
- How does Material-UI theme light / dark work?
- TypeScript error inside JavaScript file in VSCode