Develop Reference

react-responsive-carousel messed up

I've read the documentation, I don't know why it's working but it's messed up. Here's my code :
function CarouselItem(props) {
const { post } = props
return (
<React.Fragment>
<div>
<img src={`http://localhost:5000/image/${post.foto}`} />
<p className="legend">{post.judul}</p>
</div>
</React.Fragment>
)
}
function NewsItem(props) {
const { posts } = props.post
let content = posts.map(item => <CarouselItem key={item._id} post={item} />)
return (
<div>
<Carousel showThumbs={false}>{content}</Carousel>
</div>
)
}
It turns out like this :

Use this in the first line of your .js file:
import 'react-responsive-carousel/lib/styles/carousel.min.css';

Function doesn't do anything

Basically, I am sending an array of objects into my function as a parameter, but the function doesn't do anything. When I want to print out my array of objects, I can show all items on the console, however, I cannot render them.
renderComment() function doesn't work or doesn't return anything. Also you can take a closer look at my render method, you will see that commented code to print out the expected output of renderComment in the console.
class DishDetails extends Component {
renderDish(dish) {
if (dish) {
return (
<div>
<Card className="col-12 col-md-5 m-1">
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
)
} else {
return (
<div></div>
)
}
}
renderComments(comments) {
comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
})
}
render() {
const selected = this.props.selectedDish;
/* if(selected) {
this.props.selectedDish.comments.map(comment => {
console.log(comment.comment)
})
} */
return (
<div>
{selected &&
<div>
{this.renderDish(this.props.selectedDish)}
{this.renderComments(this.props.selectedDish.comments)}
</div>
}
</div>
)
}
}
export default DishDetails

The renderComment function does not return anything because there is no return statement in the function. There is a return in the map (which is still required), but that is not the return for the function.
To fix this, add a return at the top of renderComment, like this:
renderComment(comments) {
return comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
}
}

React page not rendering with all elements and no header

I have a page in my react site that will load an option box of values retrieved from the server and when the user selects an item from the box, I then make another call to the server for different data (file names and a URL to download the file).
What I can't get working is two things 1) when I select an item from the box, I get to a new page that doesn't have my header and other items that show after the render() call. 2) I can iterate through my array and get the items I need but none of my href links show.
itemSelect(event){
params.fileName= event.currentTarget[1].name
restAPI.put(`/api/customers/files`, {params: event.nativeEvent.srcElement.value}).then(res =>{
const element = (
<div>
{Object.entries(res.data).forEach(key => {
if(key[1].name.length > 0){
console.log('url', key[1].url)
console.log('name', key[1].name)
return <a href={key[1].url}>{key[1].name}</a>
}
})}
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
return ReactDOM.render(element, document.getElementById('root'));
})
}
render() {
const { folderList = {} } = this.state;
return (
<div id="root">
<select name='folderListing' onChange={this.itemSelect.bind(this)}>
{Object.values(folderList).map(function(item) {
return <option key={item} name={item} id={item} value={item}>{item} </option>
})}
</select>
</div>
)
}

You are losing your elements because of this line:
return ReactDOM.render(element, document.getElementById('root'));
You are effectively replacing your entire app with element. Instead, use the returned element in your render method:
state = {
links: null,
folderList: {}
};
itemSelect(event){
params.fileName= event.currentTarget[1].name
restAPI.put(`/api/customers/files`, {params: event.nativeEvent.srcElement.value}).then(res =>{
const element = (
<div>
{Object.entries(res.data).forEach(key => {
if(key[1].name.length > 0){
console.log('url', key[1].url)
console.log('name', key[1].name)
return <a href={key[1].url}>{key[1].name}</a>
}
})}
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
this.setState({
links: element
});
});
}
render() {
const { folderList = {}, links } = this.state;
return (
<div id="root">
<select name='folderListing' onChange={this.itemSelect.bind(this)}>
{Object.values(folderList).map(function(item) {
return <option key={item} name={item} id={item} value={item}>{item} </option>
})}
</select>
{links}
</div>
)
}

React: How to show message when result is zero in react

How to show No Result message when the search result is empty with in map() ?
export class Properties extends React.Component {
render () {
const { data, searchText } = this.props;
const offersList = data
.filter(offerDetail => {
return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
})
.map(offerDetail => {
return (
<div className="offer" key={offerDetail.id}>
<h2 className="offer-title">{offerDetail.title}</h2>
<p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p>
</div>
);
});
return (
<main>
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList }
</div>
</main>
);
}
}

With a ternary operator:
<main>
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList.length ? offersList : <p>No result</p> }
</div>
</main>

If offersList array is empty, it's length will equal to 0. You can make easy condition:
<div className="container">
<h1>Main {offersList.length}</h1>
{ offersList.length ? offersList : <p>No Result</p> }
</div>

{offersList.length ? (
// html markup with results
) : (
// html markup if no results
)}

How to return data in a react .map statement?

I want to use warningItem within my return statement in order to map some data into a react component.
I want to loop over area but have problems with syntax.
createWarnings = warningsRawData => {
return warningsRawData.map(warningItem => {
return (
<div>
<p className={styles.warningMainText} />
<p>warningItem.area[0]</p>
</div>
);
});
};

It looks like you are missing the brackets around it. Try:
createWarnings = warningsRawData => {
return warningsRawData.map( (warningItem, i) => {
return (
<div key={i}>
<p className={styles.warningMainText} />
<p>{warningItem.area[0]}</p>
</div>
);
});
};

Whenever you loop to return elememnt in react, add key attribute is must. Else you will get warning.And add {warningItem.area[0]}
createWarnings = warningsRawData => {
let values = warningsRawData.map((warningItem,index) => {
return (
<div key={index}>
<p className={styles.warningMainText} />
<p>{warningItem.area[0]}</p>
</div>
);
});
return values
}
;