I tried to convert react js function to class but I didn't know how to convert it completely please look at this function and convert it for me correctly.
original function
code :var MailboxList = React.createClass({render: function() {
var mailbox_list = this.props.mailboxes.map(function(mailbox) {
return (
<li className="list-group-item"
key={mailbox.id}
onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}>
<span className="badge">
{mailbox.emails.length}
</span>{mailbox.name}</li>);}.bind(this));
return (
<divclassName="col-md-2">
<ul className="mailboxes list-group">
{mailbox_list}</ul>
</div>);
}});
I would recommend using the most recent way to build component with babel 6.
As a Functions
export default function MailboxList({ mailboxes }) {
const mailbox_list = mailboxes.map((mailbox) =>
(
<li className="list-group-item"
key={mailbox.id}
onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}
>
<span className="badge">
{mailbox.emails.length}
</span>{mailbox.name}</li>
));
return (
<div className="col-md-2" >
<ul className="mailboxes list-group">
{mailbox_list}</ul>
</div>
);
}
As a Class
export default class MailboxList extends React.Component {
renderMailboxList = () => {
return (
this.props.mailboxes.map((mailbox) => (
<li className="list-group-item"
key={mailbox.id}
onClick={this.props.onSelectMailbox.bind(null, mailbox.id)}
>
<span className="badge">
{mailbox.emails.length}
</span>
{mailbox.name}
</li>
))
)
}
render() {
return (
<div className="col-md-2" >
<ul className="mailboxes list-group">
{this.renderMailboxList}</ul>
</div>
);
}
}
Related
I was unable to populate the with the correct array information. This is now working with the fix below.
Here is the corrected file.
renderComments(){
if (this.props.selectedDish != null) {
const commentList = this.props.selectedDish.comments;
return (
<div>
<h4>Comments</h4>
{commentList.map((comment) => {
return (
<ul className="list-unstyled" >
<li>
<p>{comment.comment}</p>
<p> -- {comment.author}{" "}
{Intl.DateTimeFormat("en-US",{
month: "short",
day: "2-digit",
year: "numeric"}).format(new Date(comment.date))}
</p>
</li>
</ul>
);
})};
</div>
);
} else {
return (
<div></div>
);
}
}
Thank you sava128
You should assign comments like you did with dish.name and dish.description
try:
renderComments() {
const dish = this.props.selectedDish;
if (dish) {
const commentList = dish.comments;
console.log("test2", commentList);
return (
<div>
<h4>Comments</h4>
<ul className="list-unstyled">
{commentList.map((comment) => {
return (
// list items here
)
})}
</ul>
</div>
);
} // else here
}
I am very new to react and js,
I have a menu and submenu, I use a list to map data,
I want to write a function, so onmouseover one item in the list,
if it has submenu, it will show.
the problem is that I can't select the submenu using ref.
It is just too complicated for me, any help would be much appreciated!
enter image description here
import React, { Component } from "react";
export class Menu extends Component {
constructor(props) {
super(props);
this.liRefs = [];
}
showSubmenu = (e) => {
// this.liRefs.current.style.display = "block";
for (var i = 0; i < this.liRefs.length; i++) {
this.liRefs[i].current.style.display = "block";
}
// console.log(this.liRefs[10]);
};
getStyle = (e) => {
e.target.style.background = "red";
};
render() {
return (
<ul className="mainmenu">
{this.props.items.map((i) =>
i.subitems ? (
<li key={i.id} onMouseOver={this.showSubmenu}>
{i.icon}
{i.name}
<ul key={i.id} ref={(ref) => (this.liRefs[i.id] = ref)}>
{i.subitems.map((item) => (
<div key={item.id} className="submenu">
{item.icon}
{item.name}
</div>
))}
</ul>
</li>
) : (
<li key={i.id}>
{i.icon}
{i.name}
{i.img}
</li>
)
)}
</ul>
);
}
}
export default Menu;
You are giving ref value to this. liRefs[i.id] and accessing through this. liRefs[i] so that both are the different change your code as below:
{this.props.items.map((i,index) =>
i.subitems ? (
<li key={i.id} onMouseOver={this.showSubmenu}>
{i.icon}
{i.name}
<ul key={i.id} ref={(ref) => (this.liRefs[i.id] = ref)}>
{i.subitems.map((item) => (
<div key={item.id} className="submenu">
{item.icon}
{item.name}
</div>
))}
</ul>
</li>
) : (
<li key={i.id}>
{i.icon}
{i.name}
{i.img}
</li>
)
)}
I am new to React, I want to hide parent div if child is having null, li data is passing with props
import React from 'react';
const PublicationTags = (props) => {
return (
<div className="publication-tags">
<h4>Темы публикации</h4>
<ul>
{props.data &&
props.data.tag_names &&
props.data.tag_names.map((tag_name, key) => (
<li key={key}>
{tag_name}
</li>
))}
</ul>
</div>
);
};
export default PublicationTags;
If there is no data on li items I want to hide the and tag.
<ParentDiv style={this.props.data===null ? {display:'none'}:{display:'flex'}>{this.props.data}</ParentDiv>
Hope this helps.
Depends on the whole structure of the app but you could do something like:
import React from 'react';
const PublicationTags = props => {
if (!props.data.length) {
return null;
}
return (
<div className="publication-tags">
<h4>Темы публикации</h4>
<ul>
{props.data &&
props.data.tag_names &&
props.data.tag_names.map((tag_name, key) => (
<li key={key}>
{tag_name}
</li>
))}
</ul>
</div>
);
};
export default PublicationTags;
or:
import React from 'react';
const PublicationTags = props => {
return props.data.length ? (
<div className="publication-tags">
<h4>Темы публикации</h4>
<ul>
{props.data &&
props.data.tag_names &&
props.data.tag_names.map((tag_name, key) => (
<li key={key}>
{tag_name}
</li>
))}
</ul>
</div>
) : null;
};
export default PublicationTags;
I am trying to loop through object of objects and using map to list the item and I am getting this object from redux. I can console.log the value but jsx returns nothing. I tried removing {} and return and using () only but still it is not rendering anything.
My posts object looks like
posts = { 1: {id: 1, title: "Hello world"} }
Component.js
renderList(){
const { posts } = this.props;
Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
render(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
I can't figure out what I am doing wrong.
Your renderList method does not have a return statement.
Depending on if your version of React you can either return an array here or you need to wrap it in a div (or in this case put the ul into it).
renderListOnReact16(){
const { posts } = this.props;
return Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
renderListOnReact15(){
const { posts } = this.props;
return (
<ul className="list-group">
{Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
})}
);
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
{this.renderList()}
</div>
);
}
I have the following in React (using redux):
....
deleteBase(title) {
this.props.dispatch(removeBase(title));
}
render() {
const baseList = this.props.bases.map(base => {
return (
<li key={base.title} className="base">
<Link to={base.title}>{base.title}</Link>
<i
className="fas fa-times"
onClick={title => this.deleteBase(title)}
/>
</li>
);
});
}
In the dispatch function of removeBase I will need to have access to the single base.title from the clicked element. No matter how I try to get the right title transferred over to the function I can't do it.
return (
<ul className="baseWrapper">
{baseList}
<li className="add-list-wrapper">
<AddBase type="base" onAdd={title => this.addBase(title)} />
</li>
</ul>
);