Develop Reference

React: implementing a router

I tried implementing browser router, but to no success. i'm having trouble with useParams hook, and just the router in general. Looked through multiple posts and i just wasn't able to get it working. I'll post the most barebones code below, hoping someone knows the solution. I removed the traces of the router, since it didn't work.
App.js is currently empty:
const App=()=> {
return (
<Main/>
);
}
Main.jsx is my main element, where components change. There isn't a page change per se, everything is in the main element. values get passed through props into main and written into state, so the useEffect can change visibility of components based on what you chose, first category, then recipe.:
const Main =()=> {
const [showElement, setShowElement] = useState("category");
const [selectedCategory, setSelectedCategory] = useState();
const [selectedRecipe, setSelectedRecipe] = useState();
useEffect(()=> {
if (selectedRecipe) {
setShowElement("recipe")
} else if (selectedCategory) {
setShowElement("recipeSelection")
}
window.scrollTo(0, 0)
}, [selectedCategory][selectedRecipe]);
return (
<>
<Header />
<main className="main">
<div>
<div>
{showElement === "category" &&
<CategoryWindow
passSelectedCategory={setSelectedCategory}
/>
}
</div>
<div>
{showElement === "recipeSelection" &&
<RecipeSelection
value={selectedCategory}
passSelectedRecipe={setSelectedRecipe}
/>
}
</div>
<div>
{showElement === "recipe" &&
<RecipeWindow
value={selectedRecipe}
/>
}
</div>
</div>
</main>
</>
)
}
This is the recipe picker component. For example when i click on curry, i'd like the url to show /food/curry. None od the names are hardcoded, everything comes from a javascript object:
const RecipeSelection =(props)=> {
const recipies = Recipies.filter(x=>x.type === props.value);
return (
<div className="selection-div">
<div className="selection-inner">
{recipies.map(selection =>
<>
<img src={require(`../images/${selection.id}.png`)}
className="selection-single"
key={selection.id}
alt={"picture of " + selection.id}
onClick={()=> props.passSelectedRecipe(selection.id)}
>
</img>
<div className="container-h3"
onClick={()=> props.passSelectedRecipe(selection.id)}
>
<h3 className="selection-h3">{selection.name}</h3>
</div>
</>
)}
</div>
</div>
)
}

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';

How to pass ref to component in React?

I am using a library called react-swipe (not especially relevant), which exposes next() and prev() methods on the instance, which I am accessing through a ref.
When I have the ReactSwipe component in my main App.js file this works perfectly well, e.g.:
_handlePrev() {
this.reactSwipe.prev()
}
_handleNext() {
this.reactSwipe.next()
}
render() {
let singlePlanets
singlePlanets = this.state.planetData.map(data => {
return (
<div className="single-planet" key={data.id}>
<div className="image">
<img src={emptyPlanet} alt={data.name} />
</div>
<h2>{data.name}</h2>
<div className="extract" dangerouslySetInnerHTML={{ __html: data.extract }} />
</div>
)
})
return (
<div className="app-container">
<TitleBar />
<ReactSwipe ref={reactSwipe => this.reactSwipe = reactSwipe} className="content" key={singlePlanets.length}>
{singlePlanets}
</ReactSwipe>
<MenuBar handleNext={this._handleNext.bind(this)} handlePrev={this._handlePrev.bind(this)} />
</div>
)
}
But what I'm trying to do is separate out the ReactSwipe and planetData mapping logic into its own component (code below), however when I do this (by trying to pass the ref through as a prop) I always get the error this.reactSwipe.prev() (or .next()) is not a function, no matter what I try. I'm wondering - what is the correct way to go about this?
This what I have in my return in App.js:
<PlanetInfo planetData={this.state.planetData} swipeRef={reactSwipe => this.reactSwipe = reactSwipe} />
and in PlanetInfo component:
return (
<ReactSwipe ref={this.swipeRef} className="content" key={singlePlanets.length}>
{singlePlanets}
</ReactSwipe>
)

Replace ref={this.swipeRef} with ref={this.props.swipeRef} in PlanetInfo component.

Passing data between components in React

Ultimately I'm trying to pass mapped elements in an array to a child component. I made a WordPress API call to get back posts for a preview page, and now that I'm trying to have that data render in their own pages, I keep getting that the data is undefined. The dynamic links are rendering as expected, but none of the other data is being passed.
Articles.js
// cut for brevity
render() {
let articles = this.state.newsData.map((article, index) => {
if(this.state.requestFailed) return <p>Failed!</p>
if(!this.state.newsData) return <p>Loading...</p>
return(
<div key={index} className="article-container">
<div className="article-preview">
<span className="article-date">{article.date}</span>
<h5>{article.title.rendered}</h5>
<div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />
<Link to={`/news/${article.slug}`}>Read More...</Link>
</div>
<Route path={`/news/:articleSlug`}
render={ props => <Article data={article} {...props} />}
/>
</div>
)
});
return (
<div>
<h3>All Articles from Blog</h3>
{articles}
</div>
)
}
Article.js
import React from 'react';
const Article = ({match, data}) => {
let articleData;
{ console.log(this.data) }
if(data)
articleData = <div>
<h3> {data.title.rendered}</h3>
<div dangerouslySetInnerHTML={{ __html: data.content.rendered }} />
<hr />
</div>
else
articleData = <h2> Sorry. That article doesn't exist. </h2>;
return (
<div>
<div>
{articleData}
</div>
</div>
)
}
export default Article;
How do I get the data from the array into the Article component?

Your problem is with asynchronous requests.
You have a route that will call the render method when the user clicks on a link. At that point in time, javascript has no reference to the article anymore, you need to persist it.
Here's an example of what you are experiencing
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 1);
}
The code above will always log 10
A solution to this problem is using bind.
for (var i = 0; i < 10; i++) {
setTimeout(function(i) { console.log(i); }.bind(null, i), 1);
}
So, in your code, you need to persist the article variable.
You can do that by calling a method that takes the data.
renderArticle(data) {
return props => <Article data={data} {...props} />
}
render() {
let articles = this.state.newsData.map((article, index) => {
if(this.state.requestFailed) return <p>Failed!</p>
if(!this.state.newsData) return <p>Loading...</p>
return(
<div key={index} className="article-container">
<div className="article-preview">
<span className="article-date">{article.date}</span>
<h5>{article.title.rendered}</h5>
<div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />
<Link to={`/news/${article.slug}`}>Read More...</Link>
</div>
<Route path={`/news/:articleSlug`}
render={this.renderArticle(article)}
/>
</div>
)
});
return (
<div>
<h3>All Articles from Blog</h3>
{articles}
</div>
)
}
Hope this points you in the right direction.

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
}
;