Click here to Skip to main content
15,441,527 members
Please Sign up or sign in to vote.
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
Updated 26-Aug-19 6:42am

1 solution

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.[^]
 
Share this answer
 
Comments
Kioshilol 26-Aug-19 13:38pm    
but how i can transfer data from contrroller to react component??
Afzaal Ahmad Zeeshan 26-Aug-19 13:40pm    
I mentioned the Ajax part in the answer, make a call to the controller, get the data in asynchronous request and then, either set the state or create new component. Please read the link I shared.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900