BearCooder Comments - Answer Overflow

BearCooder

•Created by BearCooder on 3/6/2024 in #help

How to connect my c# backend with the frontend?

Yes true. I just have a problem to make a successfull request to my ASP NET Core app to see the data on the frontend. And I was trying either with axios or fetch. This is what I try in React. The backend code is in my program.cs in the github link. No matter what I try I get TypeErrors in browser console. And now its patient.name.given is undefined.

import React, { useEffect, useState } from 'react';

interface Patient {
  id: string;
  name: { family: string; given: string[] };
  birthDate: string;
  identifier: { value: string }[];
}

const DataList: React.FC = () => {
  const [patients, setPatients] = useState<Patient[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://localhost:4000/patient');
      const data: { entry: { resource: Patient }[] } = await response.json();
      setPatients(data.entry.map((entry) => entry.resource));
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Patient List</h2>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Given Name</th>
            <th>Family Name</th>
            <th>Birth Date</th>
            <th>Identifier</th>
          </tr>
        </thead>
        <tbody>
          {patients.map((patient) => (
            <tr key={patient.id}>
              <td>{patient.id}</td>
              <td>{patient.name.given.join(' ')}</td>
              <td>{patient.name.family}</td>
              <td>{patient.birthDate}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DataList;

import React, { useEffect, useState } from 'react';

interface Patient {
  id: string;
  name: { family: string; given: string[] };
  birthDate: string;
  identifier: { value: string }[];
}

const DataList: React.FC = () => {
  const [patients, setPatients] = useState<Patient[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://localhost:4000/patient');
      const data: { entry: { resource: Patient }[] } = await response.json();
      setPatients(data.entry.map((entry) => entry.resource));
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Patient List</h2>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Given Name</th>
            <th>Family Name</th>
            <th>Birth Date</th>
            <th>Identifier</th>
          </tr>
        </thead>
        <tbody>
          {patients.map((patient) => (
            <tr key={patient.id}>
              <td>{patient.id}</td>
              <td>{patient.name.given.join(' ')}</td>
              <td>{patient.name.family}</td>
              <td>{patient.birthDate}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DataList;

21 replies

CC#

•Created by BearCooder on 3/6/2024 in #help

How to connect my c# backend with the frontend?

Ok that sounds good I also use Vite with React. And then I should be able to display certain data with axios?

21 replies

CC#

•Created by BearCooder on 3/6/2024 in #help

How to connect my c# backend with the frontend?

So you mean something like adding a proxy in my package json where my react app e.g. "proxy": "http://localhost:5000"? And using the port where my ASP NET Core app is running.

21 replies

CC#

•Created by BearCooder on 3/6/2024 in #help

How to connect my c# backend with the frontend?

Ah I did not know this. I use VSCode. I was looking for a best practice how to work with c# and react but at the end I was not sure whats the right approach to be honest

21 replies

Gaming

Programming