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


Related Query

More Query from same tag