We Keep Coding

Map function not displaying data properly

I use to Map method to display data form API but data is not aligned properly I apply reverse method to reverse data but reverse is not working properly
I create this function to display data:
const blogCategory = (item) => {
return(
<>
<div>
<div key={item.title} className="mx-3" style=
{{display:"flex",justifyContent:"center",height:"750px"}}>
<div className="blog bolg-post">
<div className="img-hover-zoom">
<Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
<img style={{cursor:"pointer"}} className="blog-box" src={item.urlToImage}/>
</Link>
</div>
<div className="d-flex flex-column">
<span className="name-blog">{item.category}</span>
<Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
<span style={{cursor: "pointer",textAlign:"justify",maxHeight:"62px",overflow:"hidden"}} className="heading-blog">{item.title}</span>
</Link>
<div style={{height:"100px",overflow:"hidden",textAlign:"justify"}} className="para-blog">{item.meta_description}</div>
{/* <div style={{height:"100px",overflow:"hidden",textAlign:"justify"}} className="para-blog" dangerouslySetInnerHTML={{ __html: item.content }}/> */}
<Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
<button className="btn-blog mt-3">{item.readingTime} min read</button>
</Link>
</div>
</div>
</div>
</div>
</>
)
}
I use Map method to display data by using this function as show in below:
<div className='d-flex col-12' style={{width:"1000px"}}>
<div style={{height:"650px",overflow:'hidden'}}>
{cat.filter(categ=>categ.category === 'technology').reverse().map(
blogCategory
)}
</div>
<div className="products">
{cat.filter(categ=>categ.category === 'technology').map(
productCategory
)}
</div>
</div>
Data is displaying properly but does not align like [0,1,2,3,4,5,6,7,8,9] it displays like [9,8,7,6,5,4,3,2,1,0] .

How can I make text flow around an icon in my React App?

I've been trying to create an note item in react, but I can't make the note description display over the trash icon, how can I get this effect?
This is what I want:
This is what I get:
My react code:
import React from 'react';
import { FiTrash2, FiCalendar, FiBookmark } from 'react-icons/fi';
import { NoteType } from '../../utils/types';
import { formatDate } from '../../utils/functions';
import './styles.css';
interface NoteItem {
note: NoteType;
onEdit(): void;
onDelete(): void;
}
const NoteItem: React.FC<NoteItem> = ({ note, onEdit, onDelete }) => {
return (
<div className="NoteItem" style={{ borderColor: note.color }}>
<div className="info" onClick={ onEdit }>
<p>{ note.description }</p>
<div className="rows">
<div className="row">
<FiBookmark size={ 18 } className="icon" color={ note.color } />
<p>{ note.status }</p>
</div>
<div className="row">
<FiCalendar size={ 18 } className="icon" color={ note.color } />
<p>{ formatDate(note.created_at) }</p>
</div>
</div>
</div>
<div className="buttons">
<button title="Deletar" onClick={ onDelete }>
<FiTrash2 size={ 18 } className="remove" />
</button>
</div>
</div>
);
}
export default NoteItem;
Can anyone help me?

Required output can be achieved with the use of float. You need to provide float:right to buttons div. Here's the working fiddle -
JS fiddle link
Note - Maybe some changes are required in the JSX structure as well.

You can do that when you wrap the rows inside the Paragraph but first you have to give a specific width to the rows, put it at first and set it's style to float: right
const NoteItem: React.FC<NoteItem> = ({ note, onEdit, onDelete }) => {
return (
<div className="NoteItem" style={{ borderColor: note.color }}>
<div className="info" onClick={ onEdit }>
<p>
<div className="rows" style="float:right; width:170px;">
<div className="row">
<FiBookmark size={ 18 } className="icon" color={ note.color } />
<p>{ note.status }</p>
</div>
<div className="row">
<FiCalendar size={ 18 } className="icon" color={ note.color } />
<p>{ formatDate(note.created_at) }</p>
</div>
</div>
{ note.description }
</p>
</div>
<div className="buttons">
<button title="Deletar" onClick={ onDelete }>
<FiTrash2 size={ 18 } className="remove" />
</button>
</div>
</div>
);
}

How to make images fit the page in React/Bootstrap?

I am using a function that maps every item in the props array to creating an image tag. I am trying to make every 3 images have a row div around them using bootstrap so they will fit the page correctly, but I cannot figure out how to do it. Any help would be appreciated. Here is the code:
import React, { Component } from 'react';
import "./Skills.css";
export default class Skills extends Component {
static defaultProps = {
images: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
"https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
"https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
"https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
"https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
"https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
"https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
]
}
photo() {
return (
<div >
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
);
}
render() {
return (
<div id="skills-background" className="mt-5">
<div id="skills-heading" className="text-center">Skills I've Learned:</div>
<div className="container">
<div className="row">
{this.photo()}
</div>
</div>
</div>
)
}
}
CodeSandbox

I think, I found the issue,
<div> <-----This div is the issue
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</div>
You have wrapped your col-md-4 with a div, and div has display: block style, so you are getting every image on separate row. Simply replace div with Fragments,
<> <-----Make it Fragment
{this.props.images.map(image => (
<div className="col-md-4">
<img className="photo" src={image} />
</div>
))}
</>

Several ternary operators nested within

There is a syntax error {} when I added {this.state.items && this.state.items.length? under <div className =" container ">. When I remove this extreme condition {this.state.items && this.state.items.length? : Components : <Preloader />everything works.A lot of nesting and I don't know exactly where the problem is. I think it is an extreme condition. Instead of the main component on the whole page I want to render the preloader on the whole page
class Items extends Component {
render () {
return (
<div className="container">
{this.state.items && this.state.items.length ?
<div className="items">
<div className="item">
<span>
<i></i>
</span>
<h4></h4>
<div className="select">
<button></button>
</div>
</div>
<div className="section">
<input/>
<span>
<i></i>
</span>
</div>
<div>
'AAAAAAA'
</div>
<div className="scroll">
{this.state.items.length === 0 && this.state.status === 1 ?
<div className="array">
<p>AAAAAA</p>
</div>
:
this.state.items && this.state.items.length ?
this.state.items.map((todo, index) =>
<Item
key={item.id}
index={index}
/>
)
:
<div className="preloader">
</div>
}
</div>
</div>
<div className="another">
<Component1
/>
<Component2
/>
</div>
:
<Preloader />
</div>
)
}
}

You were missing an } before the last div to close the first ternary and you were missing a wrapping tag for the first ternaries first expression (I used a React.Fragment). Code snippet bellow should be syntactically correct. I do recommend you refactor your code though.
class Items extends Component {
render() {
return (
<div className="container">
{this.state.items && this.state.items.length ? (
<React.Fragment>
<div className="items">
<div className="item">
<span>
<i></i>
</span>
<h4></h4>
<div className="select">
<button></button>
</div>
</div>
<div className="section">
<input />
<span>
<i></i>
</span>
</div>
<div>'AAAAAAA'</div>
<div className="scroll">
{this.state.items.length === 0 && this.state.status === 1 ? (
<div className="array">
<p>AAAAAA</p>
</div>
) : this.state.items && this.state.items.length ? (
this.state.items.map((todo, index) => (
<Item key={item.id} index={index} />
))
) : (
<div className="preloader"></div>
)}
</div>
</div>
<div className="another">
<Component1 />
<Component2 />
</div>
</React.Fragment>
) : (
<Preloader />
)}
</div>
);
}
}

How to use routes in React?

I created a web-app that uses reactjs. Now the basics of the app are :
Create Topics/Sub topics.
Display them (this uses react )
Now 2nd task is explained as :-
Show all the topics/sub topics list.
Clicking any of them sends json req and the data is recieved and displayed.
Now I want to share the topic with link , however on clicking any of the topic only one elemnt of the html renders and the url remains the same.
So this is what i want to do -
On clicking , send json req and recieve data ( done )
Change the url ( I want to know if it is possible using the same react page? )
How can I use Routes in the following code ?
Part 1 :- Deals with recents posts
Part 2 :- Deals with the Headings or Topic names
Part 3 :- Deals with Sub topics
Part 4 :- Deals with showing the Article from the chosen topic and sub topic.
Now its obvious that though the article is displayed , the link / url of the page will never change. However it makes it hard to share the articles. Thus I want to know how to apply the routes in this case ?
render() {
var lists = this.state.list;
var lists2 = this.state.list2;
var aname = this.state.article.name;
var date = this.state.article.date;
var lists3 = this.state.listrec;
return (
<div className="row">
<div id="recentsbar" className="col-md-3">
<div className="row">
<div className="col-md-9">
<div>
<div style={{ display: this.state.hide2 }}>
<h2>
<b> Recents </b>
</h2>
<div
className="lds-ellipsis"
style={{ display: this.state.load2 }}
>
<div />
<div />
<div />
<div />
</div>
<div id="subl">
{lists3.map(number => (
<Item3 name={number} show={this.rec.bind(this)} />
))}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-8">
<div style={{ display: this.state.hide }}>
<h1 style={{ marginLeft: 6 + "em" }}>
<b> Subjects List </b>
</h1>
<div className="row">
<div className="col-md-6">
<ul style={{ marginTop: 1 + "em" }} /*className="list-group"*/>
<div
className="lds-ellipsis"
style={{ display: this.state.load }}
>
<div />
<div />
<div />
<div />
</div>
{lists.map(number => (
<Item name={number} hide={this.hide.bind(this)} />
))}
</ul>
</div>
</div>
</div>
<div className="col-md-8">
<div style={{ display: this.state.show }}>
<h1 style={{ marginLeft: 6 + "em" }}>
<b> {this.state.selsub} </b>
</h1>
<div className="row">
<div className="col-md-auto" style={{ marginLeft: 6 + "em" }}>
<ul
style={{ marginTop: 1 + "em" }}
className="list-group art"
>
<div
className="lds-ellipsis"
style={{ display: this.state.load }}
>
<div />
<div />
<div />
<div />
</div>
{lists2.map(number => (
<Item2 name={number} hide2={this.hide2.bind(this)} />
))}
</ul>
</div>
</div>
</div>
</div>
<div style={{ display: this.state.showarticle }}>
<div className="lds-ellipsis" style={{ display: this.state.load }}>
<div />
<div />
<div />
<div />
</div>
<div className="arthead"> {aname} </div>
<div style={{ float: "right", opacity: 0.5 }}>
Updated on: {date}{" "}
</div>
<div
style={{
marginLeft: 1 + "em",
lineHeight: 2 + "em",
marginTop: 4 + "em"
}}
dangerouslySetInnerHTML={{ __html: this.state.article.body }}
/>
</div>
</div>
</div>
);
}

You should look into react-router's Switch and react-router-dom's Route Components.
For instance the following jsx:
import { Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
class YourComponent extends Component {
render() {
return (
<Switch>
<Route
path="/"
exact
render={
() => (
<h1>root content</h1>
<Link to="/content1">content1</Link>
)
}
/>
<Route
path="/content1"
exact
render={
() => (
<h1>content 1</h1>
<Link to="/">root</Link>
)
}
/>
</Switch>
);
}
}
Route allows conditional rendering based on the URL.
Switch ensures the first matching Route only will be rendered (actually what's returned by the render prop of the Route component).
For all of this to work, remember that a Router component from react router must be an ancestor of YourComponent.
If you want to trigger an SPA navigation after an event, or during a callback, you have to use the withRouter HOC from react-router.
StackOverflow thread explaining how it works: Programmatically navigate using react router
I also suggest you look into react-router-redux for redux integration of react-router. It offers the push action to navigate to another route.
References:
https://reacttraining.com/react-router/web/api/Switch
https://reacttraining.com/react-router/web/api/Route
https://reacttraining.com/react-router/web/api/Link
https://reacttraining.com/react-router/web/api/withRouter
React : difference between <Route exact path="/" /> and <Route path="/" />
https://www.npmjs.com/package/react-router-redux

I have created a Simple react routing example, hope it will make you undrestand routing in react.
https://github.com/shivakumaraswamy/reactjs/tree/master/ReacRouting