score:0
try this approach,
import { component } from "react";
import "./styles.css";
class app extends component {
render() {
const data = [
{
id: 1,
name: "john smith",
email: "jsmith@test.com",
phone: "123456789"
},
{
id: 2,
name: "abcd",
email: "abcd@test.com",
phone: "987654321"
},
{
id: 3,
name: "tyrion",
email: "tyrion@test.com",
phone: "123412345"
}
];
return (
<div>
<customers data={data} />
</div>
);
}
}
export default app;
class customers extends component {
constructor(props) {
super(props);
this.state = {};
}
handleclick = (event) => {
this.setstate(alert("button clicked"));
console.log("button clicked");
};
render() {
const data = this.props.data;
const newdata = data.map((cval) => {
return (
<div class="panel">
<h1>{cval.name}</h1>
<p>{cval.email}</p>
{cval.phone}
<div>
<button type="submit" onclick={this.handleclick}>
click to view details
</button>
</div>
</div>
);
});
return <div>{newdata}</div>;
}
}
codesandbox - https://codesandbox.io/s/busy-knuth-bqfrg?file=/src/app.js
Source: stackoverflow.com
Related Query
- How can I add button for each block of data
- reactJS How can I add a search filter for data from the db
- How my button can move under each new added sections? For now it's placed above all sections
- How can I get one single unique data from Database for each one component?
- How to add action column in ag grid having edit/delete button for each row in react?
- How can I add an event for the Facebook Pixel to a button in my site in React?
- How can I add a button to each list view item with Reactjs?
- how can i fetch the data from antd table expanded each time when i click on expandable button
- How can I add raw data body to an axios request?
- How I can disable a button in React js for 5 seconds after click event
- How can I add a fade-in animation for Nextjs/Image when it loads?
- How can I reuse the API data for all the pages in react js
- How can i get array of object from this data for state and count in reactjs
- How do I add AppBar with Back to Top button from Material UI for React in my App?
- Firestore - How can I add the Document ID and their data in my state?
- How can I add meta tags for sharing a particular link in React.js?
- How can I create an interface for API data in typescript?
- How can I add an undo button on my toast notification?
- How can I authenticate JWT token for each request coming through SignalR hub?
- How can I add multiple path for home page with react router dom 6?
- How to add antd radio button for react?
- How can i add conditional rendering to a button in react
- How to render custom elements for each item in an object (Map data structure) in React TS?
- How can I create a global array in react? When I do separate operations for each index, I want them to save them in a single array
- How can I watch for state of data in redux container, when I want to sort or filter it?
- How can I add "editable cell" for grouped columns in Ant Design?
- How can I highlight a searched for word in data I render out?
- How i can save state ( data ) on Previous/Back" button click in ReactJS
- How can i create a separate chunk for each component?
- How can I add ellipsis for overflowing text within AntDesign's Table component?
More Query from same tag
- (React) How to access a specific element that is being mapped and returned?
- react+redux: state of store changed without view changing
- React: ReviewDetails.js:29 Uncaught TypeError: Cannot read properties of null (reading 'url')
- How to toggle watch button to watched and vice versa for each list item
- React useEffect dependent on value which is initialized after api has been called
- How to access the variables inside a function imported from another page in React?
- ContextAPI: How would one share data between contexts in React?
- Toggling Images for Active Links with React.js
- How to sort the antd-table while keep one special line forever on the top of the table?
- Call next on Flicking Carousel in React
- How to make a API post in React with useState
- Storing image in base64 format in MERN stack
- Highcharts not rendering : React+Typescript+Highcharts
- Prev and Next button is not working correctly at the breakpoints
- Dynamically include files (components) and dynamically inject those components
- react-intersection-observer not working mobile view
- I don't have border on react-bootstrap-table-next
- React return function code block for dispatching actions always skip and return nothing
- REACT- Storing data that needs to be updated frequently as a global variable instead of using setState() - not recommended?
- Conditional styling on row for dynamic cell value
- Can I create a Knob in React Storybook to modify an array with 4 values where each value has a select dropdown?
- Colors of CSS elements do not change correctly
- how to pass prop into rowrender of react-virtualized
- Expose angularJS services as APIs
- Way to call hooks from button events in react
- React useReducer sets the whole state as undefined
- ReactJS dynamic function assignment
- How to connect API with Web SPA through docker
- How to extend or merge Styled Components theme
- How to format date from Mongodb using react