React Component doesn't print on map function

React Component doesn't print on map function - javascript

This component doesnt print on a map function, I seted a console.log inside to be sure that the loop iterates and its iterating but nothing is printed
import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"
function TherapeuticResult() {
return (
<div>
<div className="card shadow py-2 mb-4">
<div className="card-body">
<div id="">
<div className="">
<div className="row">
{
window.COMPOSITE_CATEGORIES.map((category) => {
if(category.composites.length > 0){
console.log(category);//info is shown on console
<div>AAAAAAA</div>
}
})
}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default TherapeuticResult;

You need the return in your code. Try putting this way:
import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"
function TherapeuticResult() {
return (
<div>
<div className="card shadow py-2 mb-4">
<div className="card-body">
<div id="">
<div className="">
<div className="row">
{
window.COMPOSITE_CATEGORIES.map((category) => {
if(category.composites.length > 0){
console.log(category);//info is shown on console
return (
<div>AAAAAAA</div>
)
} else {
// Add your else block with "return (<code>)"
}
})
}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default TherapeuticResult;

use
{
window.COMPOSITE_CATEGORIES
.filter(category=>category.composites.length > 0)
.map((category) => {
console.log(category);//info is shown on console
return (
<div>AAAAAAA</div>
);
})
}
instead of
{
window.COMPOSITE_CATEGORIES.map((category) => {
if(category.composites.length > 0){
console.log(category);//info is shown on console
<div>AAAAAAA</div>
}
})
}

Your Array.map() callback function needs to return a value, in your case it should be like this:
<div className="row">
{
window.COMPOSITE_CATEGORIES.map((category) => {
if(category.composites.length > 0){
console.log(category);//info is shown on console
return (<div>AAAAAAA</div>)
}
})
}
</div>

Related

react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) is not a function

I created a react-redux project and I used json-server as a server. when I create an order, I save status in state in UiReducer and use it in "OrderStatusPage". The NODE_ENV is set to "development". The order is added to my db.json but I got this error in "OrderStatusPage":
Uncaught TypeError: react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) is not a function
how can I solve this error? Thanks a lot.
import React from "react";
import { useSelector } from "react-redux";
export const OrderStatusPage = () => {
const notification = useSelector((state) => state.ui.notification);
return (
<div className="container">
<div className="row d-flex justify-content-center">
<div className="col-md-6 my-5 text-center">
{notification &&
(<Notification
title={notification.title}
message={notification.message}
status={notification.status}
/>)(notification.status === "success") ? (
<Button type="button" >
Go to your Order
</Button>
) : (
<Button type="button" >
Go to your Cart
</Button>
)}
</div>
</div>
</div>
);
};

I think everything is fine. Maybe you just need split the two conditions you have like this:
{notification &&
(<Notification
title={notification.title}
message={notification.message}
status={notification.status}
/>)}
{notification.status === "success" ? (
<Button type="button" >
Go to your Order
</Button>
) : (
<Button type="button" >
Go to your Cart
</Button>
)}
I think this will work.

You should not change the state directly.
Try useState like:
import React from "react";
import { useSelector } from "react-redux";
export const OrderStatusPage = () => {
const [uistate, setUistate]=React.useState()
React.useEffect(()=>{
setUistate(useSelector((state) => state.ui.notification));
},[])
return (
<div className="container">
<div className="row d-flex justify-content-center">
<div className="col-md-6 my-5 text-center">
{uistate &&
(<Notification
title={uistate.title}
message={uistate.message}
status={uistate.status}
/>)(uistate.status === "success") ? (
<Button type="button" >
Go to your Order
</Button>
) : (
<Button type="button" >
Go to your Cart
</Button>
)}
</div>
</div>
</div>
);
};

in your code, you are using the Notification and Button components but not importing these components.
import React from "react";
import { useSelector } from "react-redux";
import { Notification } from "./Notification";
import { Button } from "./Button";
export const OrderStatusPage = () => {
const notification = useSelector((state) => state.ui.notification);
return (
<div className="container">
<div className="row d-flex justify-content-center">
<div className="col-md-6 my-5 text-center">
{notification && (
<Notification
title={notification.title}
message={notification.message}
status={notification.status}
/>
)}
{notification.status === "success" ? (
<Button type="button">Go to your Order</Button>
) : (
<Button type="button">Go to your Cart</Button>
)}
</div>
</div>
</div>
);
};

Your render method should have return statement?

class App extends React.Component {
render() {
productList.map((product) => {
return (
<div className="mainContainer">
<div className="titel">{product.title}</div>
<div className="type">{product.type}</div>
<div className="producer">{product.producer}</div>
<div className="unit">{product.unit}</div>
<div className="prisContainer">
<div className="pris">{product.price}</div>
</div>
</div>
);
});
}
}
export default App;
What am I doing wrong?

As the error states, you aren't returning anything from within the render function. Returning the mapped result will solve the problem if you are on v16 or above of react.
class App extends React.Component {
render() {
return productList.map((product) => {
return (
<div className="mainContainer">
<div className="titel">{product.title}</div>
<div className="type">{product.type}</div>
<div className="producer">{product.producer}</div>
<div className="unit">{product.unit}</div>
<div className="prisContainer">
<div className="pris">{product.price}</div>
</div>
</div>
);
});
}
}
export default App;
If you are on a lower version, wrap the result of map function within a div
render() {
return <div>{productList.map((product) => {
return (
<div className="mainContainer">
<div className="titel">{product.title}</div>
<div className="type">{product.type}</div>
<div className="producer">{product.producer}</div>
<div className="unit">{product.unit}</div>
<div className="prisContainer">
<div className="pris">{product.price}</div>
</div>
</div>
);
})}<div>
}

I would create a seperate variable that runs the map and returns the content and then add the variable in the return statement within the render
render() {
return (
<div> {content} </div>
)
}

passing index through react components

I'm studying Reactjs and I'm building a tasks project (CRUD) but I'm stuck at the point of editing, the editing part is in another component and I'm not able to send the index of the task that will be edit, I read the documentation but I'm not capable to make it, please if someone can see my code and tell what I'm doing wrong.
the app (main)code
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// data
import { todos2 } from './todos.json';
// subcomponents
import TodoForm from './components/TodoForm';
import TodoFormEdit from './components/TodoFormEdit';
class App extends Component {
constructor() {
super();
this.state = {
todos2, mode:'view'
}
this.handleAddTodo = this.handleAddTodo.bind(this);
this.handleEdit2 = this.handleEdit2.bind(this);
}
removeTodo(index) {
this.setState({
todos2: this.state.todos2.filter((e, i) => {
return i !== index
})
});
}
handleAddTodo(todo) {
this.setState({
todos2: [...this.state.todos2, todo]
})
}
handleEdit2(i) {
this.setState({mode: 'edit'});
//const mode = mode === 'edit';
alert(i);
/* alert(this.state.todos2[i].title);
alert(this.state.todos2[i].priority);
alert(this.state.todos2[i].description);
alert(this.state.todos2[i].language);*/
}
render() {
const todosAll = this.state.todos2.map((todo, i) => {
return (
<div className="col-md-4" key={i}>
<div className="card mt-4">
<div className="card-title text-center">
<h3>{todo.title} - { i } </h3>
<span className="badge badge-pill badge-danger ml-2">
{todo.priority}
</span>
</div>
<div className="card-body">
<div>
{todo.description}
</div>
<div>
{todo.language}
</div>
</div>
<div className="card-footer">
<button
className="btn btn-danger"
onClick={this.removeTodo.bind(this, i)}>
Delete
</button>
<button
className="btn btn-warning ml-2"
onClick={this.handleEdit2.bind(this, i)}>
Edit
</button>
</div>
</div>
</div>
)
});
return (
<div className="App">
<nav className="navbar navbar-dark bg-dark">
<a className="navbar-brand" href="/">
Tasks
<span className="badge badge-pill badge-light ml-2">
{this.state.todos2.length}
</span>
</a>
</nav>
<div className="container">
<div className="row mt-4">
<div className="col-md-4 text-center">
<img src={logo} className="App-logo" alt="logo" />
{/* <TodoForm onAddTodo={this.handleAddTodo} ></TodoForm> */ }
{this.state.mode === 'view' ? (
<TodoForm onAddTodo={this.handleAddTodo} />
) : (
<TodoFormEdit index={this.state.i}/>
)}
</div>
<div className="col-md-8">
<div className="row">
{todosAll}
</div>
</div>
</div>
</div>
</div>
)
}
}
export default App;
and the Edit component:
import React, { Component } from 'react';
// data
import { todos2 } from '../todos.json';
class TodoFormEdit extends Component {
constructor (i) {
super(i);
this.state = {
todos2
};
}
render() {
return (
<div>
{this.state.todos2[0].title}
</div>
)
}
}
export default TodoFormEdit;

You're passing this.state.i:
<TodoFormEdit index={this.state.i}/>
It's not clear where you set it–I see mode and todos2 state properties, I don't see i anywhere.

Making two API calls in the same component - reactjs

I'm building an app that produces two tables, each with 5 results. I can't seem to figure out how to crack the code when it comes to mapping over the second table. Table one is {renderItems}, table two is {renderUsers}. The API call for each is at the top of the App.js file detailed below, as 'repoURL' and 'userURL' respectively.
import React, { Component } from 'react';
import axios from 'axios';
const repoURL = 'https://api.github.com/search/repositories?q=stars:>1&s=stars&type=Repositories&per_page=5';
const userURL = 'https://api.github.com/search/users?q=created:>=2016-05-29&type=Users&s=followers&per_page=5';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
items: []
}
}
componentDidMount() {
var _this = this;
axios.get(repoURL)
.then(function(res){
console.log(res)
_this.setState({
items: res.data.items
});
})
.catch(function(e) {
console.log('ERROR ', e);
})
axios.get(userURL)
.then(function(res){
console.log(res)
_this.setState({
users: res.data.items
});
})
.catch(function(e) {
console.log('ERROR ', e);
})
}
render() {
const renderItems = this.state.items.map(function(item, i) {
return (
<div key={i} className="row">
<div className="col-md-3">{item.id}</div>
<div className="col-md-3">{item.name}</div>
<div className="col-md-3">{item.description}</div>
<div className="col-md-3">{item.stargazers_count}</div>
</div>
);
});
console.log(renderItems)
const renderUsers = this.state.items.map(function(item, i) {
return (
<div key={i} className="row">
<div className="col-md-3">{item.id}</div>
<div className="col-md-3">{item.name}</div>
<div className="col-md-3">{item.description}</div>
<div className="col-md-3">{item.stargazers_count}</div>
</div>
);
});
console.log(renderUsers)
return (
<div className="App">
<div className="row">
<div className="col-md-6 ">
<button type="button" id="hot_repo" className="btn btn-lg btn-danger">Hot Repositories</button>
</div>
<div className="col-md-6 ">
<button type="button" id="prolific_users" className="btn btn-lg btn-success">Prolific Users</button>
</div>
<div id="repoTable" className="col-md-6 panel panel-default">
<div id="repoHeader" className="panel-heading">5 Most Starred Repositories Last Month</div>
<div className="repoSubHeader panel-body">
<div id="repoId" className="col-md-3">ID</div>
<div id="repoName" className="col-md-3">Name</div>
<div id="repoDescription" className="col-md-3">Description</div>
<div id="repoStars" className="col-md-3">Stars</div>
</div>
<div className="row">
{renderItems}
</div>
</div>
<div id="userTable" className="col-md-6 panel panel-default">
<div id="userHeader" className="panel-heading">5 Most Active Users</div>
<div className="userSubHeader panel-body">
<div id="userId" className="col-md-3">ID</div>
<div id="userLogin" className="col-md-3">Login</div>
<div id="userAvatar" className="col-md-3">Avatar</div>
<div id="userFollowers" className="col-md-3">Followers</div>
</div>
<div className="row">
{renderUsers}
</div>
</div>
</div>
</div>
);
}
}
I feel like I'm missing something obvious, but I've been looking at it so long it's not going to be obvious to me at this point. Any help appreciated.

You have to initialize your state in the constructor as:
this.state = {
users: [],
items: []
}
and then you have to map the state items as:
const renderItems = this.state.items.map(function(item, i) {
return (
<div key={i} className="row">
<div className="col-md-3">{item.id}</div>
<div className="col-md-3">{item.name}</div>
<div className="col-md-3">{item.description}</div>
<div className="col-md-3">{item.stargazers_count}</div>
</div>
);
});
const renderUsers = this.state.users.map(function(item, i) {
return (
<div key={i} className="row">
<div className="col-md-3">{item.id}</div>
<div className="col-md-3">{item.name}</div>
<div className="col-md-3">{item.description}</div>
<div className="col-md-3">{item.stargazers_count}</div>
</div>
);
});
console.log(renderUsers)
This is under the assumption that your userUrl returns:
{
items: [
user1,
user2,
...
]
}
If it doesn't, then you need to change this part accordingly.
axios.get(userURL)
.then(function(res){
console.log(res)
_this.setState({
users: res.data.items
});
})
.catch(function(e) {
console.log('ERROR ', e);
})

the first problem I think you are doing a map assigning to const renderUsers a wrong mapping this.state.items.
Secondly you need to declare users key in the this.state in the constructor.
this.setState({ users: [], items: [] })

In React how do I use a conditional with rendering?

I have a simple notification window, and as notifications are accepted/declined I remove the object from the notifications array.
This is my bit of code for handling displaying messages:
render: function() {
return (
<div className="chatwindowheight">
<div className="row">
<div className="large-12 columns">
<div className="large-8 columns">
<p className="thin partyHeader">Party <i className="fa fa-minus-square-o"></i></p>
</div>
<div className="large-4 columns">
<i className="fa fa-users pull-right"></i>
</div>
</div>
</div>
<div className="row chatwindowheight">
<div className="large-12 small-12 columns chatwindow" id="scrolldown">
<br/>
{
this.state.messages.map((message, i) => {
return (
<MessageComponent key={i}
username={message.username}
message={message.message}
whos={message.classed} />
);
})
}
</div>
</div>
<ChatSendComponent onChatSubmit={this.handleChatSubmit}/>
</div>
)
}
What I want is to have something like
if (this.state.messages.length === 0) {
return (
<p>You have no new notifications.</p>
)
}
but when I try to wrap something like that around the current loop, it tells me that if is an error. New to React so just trying to understand the best method for approaching this. Thanks!

There are some various resolve your problem:
1.
{ this.state.messages.length > 0 ?
this.state.messages.map((message, i) => {
return (
<MessageComponent key={i}
username={message.username}
message={message.message}
whos={message.classed} />
);
}) : 'You have messages'
}
Remove you map up to render function and prepare your data there:
function render() {
var message='';
if (this.state.messages.length) {
}
}
<b>{message}</b>

Develop Reference

JavaScript is the programming language of the Web.

React Component doesn't print on map function - javascript

Your Array.map() callback function needs to return a value, in your case it should be like this: <div className="row"> { window.COMPOSITE_CATEGORIES.map((category) => { if(category.composites.length > 0){ console.log(category);//info is shown on console return (<div>AAAAAAA</div>) } }) } </div>

Related

react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) is not a function

Your render method should have return statement?

passing index through react components

Making two API calls in the same component - reactjs

In React how do I use a conditional with rendering?

Categories

Resources