Cant display data using the reactjs

Question

0.00/5 (No votes)

See more:

How i can display my data using the reactJS? what i did wrong?

What I have tried:

Controller

C#

<pre>public class EmployeeController : Controller
{
    private IUnitOfWork _dataBase;
    private IMapper<Employee, EmployeeViewModel> _employeeMapper;

    public EmployeeController(IUnitOfWork dataBase, IMapper<Employee, EmployeeViewModel> employeeMapper)
    {
        _dataBase = dataBase;
        _employeeMapper = employeeMapper;
    }

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Get()
    {
        var employees = _dataBase.Employees.GetAll();
        var employeesVM = new List<EmployeeViewModel>();

        foreach (var employee in employees)
        {
            var employeeVM = _employeeMapper.Map(employee);
            employeesVM.Add(employeeVM);
        }

        return Json(employeesVM, JsonRequestBehavior.AllowGet);
    }
}

JSX

JavaScript

<pre>class Employee extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employees: props.employee };
    }

    render()  {
        return <div>
                <p>{this.state.employees.Name}</p>
               </div>;   
    }
}

class Employees extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employees: [] };
    }
    
    render() {

        return <div>
            {
                this.state.employee.map(function (employee) {

                    return <Employee employee={employee} />
                        <p>Hello</p>
                })
            }
        </div>;
    }
}
    
    
    ReactDOM.render(
        <Employees url="/employee/getall" />,
        document.getElementById("content")
);

View

HTML

<pre>@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}



    <html>
    <head>
        <title>Employee</title>
    </head>
    <body>
        <div id="content"></div>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
        <script src="@Url.Content("~/Scripts/employee.jsx")"></script>
        <script src="~/Scripts/react/react.min.js"></script>
    </body>
    </html>

Posted 26-Aug-19 3:45am

Kioshilol

Updated 26-Aug-19 6:42am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Accepted Answer · 2019-08-26T06:43:00

This kind of problems arise normally in React, nothing to worry about. I have modified your code a bit, and ran in my own environment and it works just fine.

Here are a few of the suggestions I want to make in order to correct your React code. First of all, JSX needs to be wrapped in small brackets before a return statement, otherwise you will face automatic semicolon insertion; read this[^] for more on that.

So most of your code would become from,

JavaScript

render()  {
    return <div>
            <p>{this.state.employees.Name}</p>
           </div>;   
}

To,

JavaScript

render()  {
    return (<div>
            <p>{this.state.employees.Name}</p>
           </div>);
}

This will solve issues with the proper object return. Secondly, if you face issues such as "Unexpected token '<'", that means that your JavaScript is not being handled as ES6 and JSX won't work there. You need to apply type="text/babel" to your script elements that are importing the React code. Such as,

XML

<script type="text/babel">
class Employees...

ReactDOM...
</script>

This will help browsers parse the content and make sure it is valid. Here is the code that I am currently using for your application and it renders the employees' names.

JavaScript

// Employees.js
// I am using separate files for each component; a good practice!
import React from "react";
import Employee from "./Employee";

class Employees extends React.Component {
    constructor(props) {
        super(props);
        this.state = { employees: [ { Name: "Someone" }, { Name: "Else" }, { Name: "Working" }, { Name: "Here" } ] };
    }
    
    render() {
        return (
            <div>
            {
                this.state.employees.map(function (employee) {
                  return (<Employee employee={employee} />)
                })
            }
            </div>);
    }
}

export default Employees;

// Employee.js
import React from "react";

class Employee extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employee: props.employee };
    }

    render()  {
        return (<div>
                  <p>{this.state.employee.Name}</p>
               </div>);
    }
}

export default Employee;

// App.js
function App() {
    return (<Employees />); 
}

// index.js
ReactDOM.render(<App />, document.getElementById('root'));

This is the flow of the application that I have used and it has worked just perfectly. You can also try out the same features on CodePen as their React editor normally works just fine. https://codepen.io/pen/

Oh, and the data loading feature from Ajax needs to be implemented aside from React, React is not a framework. You can try jQuery Ajax, to download the content from React and then push that to the React components state.

See this link.[^]