how passing props between component using react hooks - javascript

I've retrieved datas from my database to the Recipes component. now, I'm trying to pass those datas into the RecipeList component. However, I got just the bullet points into the RecipeList component and for some reason the Recipes component return only the element " title = {recipe.title} "
I'm just starting out programming. I would be pleased if someone can help me.
Recipes
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import RecipeList from '../pages/espaceUser/RecipeList'
export default function Recipes(props) {
const [recipes, setRecipes] = useState([])
const [test] = useState("text")
useEffect(() => {
const id = props.match.params.id
const getRecipes = async () => {
const url = `http://localhost:8000/user/recipes/${id}`
const result = await axios.get(url)
setRecipes(result.data)
console.log('test', result.data);
}
getRecipes()
},[])
return (
<div>
{recipes.map(recipe => (
<RecipeList
key={recipe.id}
title={recipe.title}
materiel={recipe.materiel}
ingredient={recipe.ingredient}/>
))}
</div>
)
}
RecipeList
import React from 'react'
export default function RecipeList(props) {
return (
<div>
<ul>
<li>{props.title}</li>
<li>{props.materiel}</li>
<li>{props.ingredient}</li>
</ul>
</div>
)
}

It seems to me that it is not a problem with the syntax or structure of your code, if it's rendering the title at least it means that everything is working fine. I would suggest looking at react dev tools in chrome and check out if the components have all the props they are supposed to have

Related

Trying to render a MUI Grid dynamically in React

I first make a request to a MongoDB server to get data from a database, all asynchronously and return a promise in App.js.
Then I pass that as a prop in my Card.js component and use .then() to get the data and push it into a new array. (I'm not sure if this is the best way to do this)
Right now I'm trying to display the names in the data dynamically using an MUI Grid, I am having problems as it shows that the data is in my array but I get no Cards on the UI. What am I doing wrong?
Card.js
import * as React from 'react';
import Grid from '#mui/material/Grid';
import RoomCard from './RoomCard'
import { useState } from 'react';
export default function Card({rooms}){
const [loading, setLoading] = useState(false);
let roomData = [];
rooms.then(roomNames => {
roomNames.map(room => roomData.push(room));
})
console.log(roomData);
return(<Grid container spacing={2}>
{roomData.map(room =>
<Grid item key={room} xs ={4}>
<RoomCard name = {room.name} />
</Grid>
)}
</Grid>
);
}
App.js
import './App.css';
import Navbar from './components/NavBar';
import AddRoom from './components/AddRoom'
import RoomCard from './components/RoomCard'
import Grid from '#mui/material/Grid';
import Cards from './components/Cards'
function App() {
let rooms = getRecords();
return (
<div className="App">
<Navbar/>
<AddRoom/>
<Cards rooms = {rooms} />
</div>
);
}
async function getRecords() {
const response = await fetch(`http://localhost:5000/room/`);
if (!response.ok) {
const message = `An error occured: ${response.statusText}`;
window.alert(message);
return;
}
const rooms = await response.json();
return rooms;
}
export default App;
On my opinion App.js should be Higher order component (HOC) for Card.js so that Card.js is easily resusable for each room as your code may have it, the App.js should contain the loading controller. And you cannot call getRecords sync except inside an async and await function and you can use it inside a useEffect function since you are using function react function component, your code should be like this now
import React,{useEffect,useState} from 'react'
import './App.css';
import Navbar from './components/NavBar';
import AddRoom from './components/AddRoom'
import RoomCard from './components/RoomCard'
import Grid from '#mui/material/Grid';
import Cards from './components/Cards'
function App() {
const [loading,setLoading] useState(false);
const [rooms, setRooms] useState([]);
useEffect(()=>{
async fetchRooms(){
try{
setLoading(true)
const fetchedRooms = await getRecords();
setRooms(fetchedRooms);
setLoading(false)
}catch{
setLoading(false)
}
}
fetchRooms();
},[])// the empty array is used to pass value that will make this function to be called if they changed, since its empty this useffect only gets called when component is mounted
return (
<div className="App">
{ loading && (<p>loading.....</p>) }
<Navbar/>
<AddRoom/>
<Cards rooms = {rooms} />
</div>
);
}
async function getRecords() {
const response = await fetch(`http://localhost:5000/room/`);
if (!response.ok) {
const message = `An error occured: ${response.statusText}`;
window.alert(message);
return;
}
const rooms = await response.json();
return rooms;
}
export default App;
And inside your card.js you should have something like this
import * as React from 'react';
import Grid from '#mui/material/Grid';
import RoomCard from './RoomCard'
import { useState } from 'react';
export default function Card({rooms}){
return(<Grid container spacing={2}>
{rooms.map(room =>
<Grid item key={room} xs ={4}>
<RoomCard name = {room.name} />
</Grid>
)}
</Grid>
);
}
This makes sure your card.js is clean

ReactMarkdown is not displaying in React app

I'm trying to make a component that displays some simple markdown, but just can't seem to get the markdown to display on the page. It's not even creating a component for it in the HTML. This component is displaying properly and the 'Test' is showing up but not the markdown. I tried reinstalling my node_modules and that didn't work, any tips?
import React, {useState, useEffect} from 'react'
import axios from 'axios';
import {API_DEV_URL, API_PROD_URL} from '../env';
import Markdown from 'react-markdown';
const ROOT = (process.env.REACT_APP_ENV === 'production')? API_PROD_URL : API_DEV_URL;
function Hello() {
const [test, setTest] = useState("");
console.log(process.env.REACT_APP_ENV);
useEffect(() => {
axios.get(ROOT+'/test')
.then(res => setTest(res.data))
.catch(err => console.log(err));
}, []);
const input = '# This is a header\n\nAnd this is a paragraph'
return (
<header>
<h1>Test</h1>
<Markdown source={input}/>
</header>
);
}
export default Hello;
The markdown that needs to be parsed should be provided as a children. react-markdown does have make use of source prop in there API.
Change from
<Markdown source={input}/>
to
<Markdown>{input}</Markdown>

How to pass state/data from one component to another in React.js (riot api specifically)

I am trying to pull information from one component's API call to then use that data in another API call in a separate component. However, I am unsure how to export and use the data from the first API call in the second component.
App.js
import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';
function App() {
return (
<div className="App">
<h1>Hello world</h1>
<FetchPlayer></FetchPlayer>
<FetchMatch></FetchMatch>
</div>
);
}
export default App;
fetch.player then makes the first API call to get a users specific ID which will be used in the second API call too fetch that users match history.
fetch.player.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const FetchPlayer = () => {
const [playerData, setPlayerData] = useState([]);
const userName = 'users name';
const userTagLine = '1234';
const apiKey = '???';
useEffect( () => {
axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
.then(response => {
console.log(response.data)
setPlayerData([response.data])
})
.catch(error => console.log(error))
}, []);
return (
<div>
{playerData.map( data => (
<div>
<p>{data.puuid}</p>
<p>{data.gameName}#{data.tagLine}</p>
</div>
))}
</div>
)
}
export default FetchPlayer;
not much here but just in case...
fetch.match.js
import React, { useState } from 'react';
// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = () => {
const [matchData, setMatchData] = useState([]);
return (
<div>
// players match list goes here
</div>
)
}
export default FetchMatch;
I am unsure if I should make a separate function instead which would allow me to create consts to handle both API calls in a single file. Or if there is a way to pass the state from fetch.player as a prop to fetch.match from App.js. I have tried to do the former but it either doesn't work or I am messing up the syntax (most likely this)
If you render both component parallelly in a parent component, they are called sibling components.
Data sharing in sibling components can be done by multiple ways (Redux, Context etc) but the easiest and simplest way (the most basic way without 3rd party API) involves the use of parent as a middle component.
First you create the state in the parent component and provide it as props to the child component which need the data from its sibling (in your case is FetchMatch).
import React from 'react';
import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';
function App() {
const [data,setData] = React.useState();
return (
<div className="App">
<h1>Hello world</h1>
<FetchPlayer></FetchPlayer>
<FetchMatch data={data} ></FetchMatch>
</div>
);
}
export default App;
Provide the function to setData as a props to the child component which will fetch the initial API (in your case is FetchPlayer)
<FetchPlayer onPlayerLoad={(data) => setData(data)} />
Then, in that child component when you finish calling the API and get the result, pass that result to the onPlayerLoad function which will call the setData function with the result as parameters. It will lead to state change and re-rendering of the second FetchMatch component feeding the props data with API results.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const FetchPlayer = ({onPlayerLoad}) => {
const [playerData, setPlayerData] = useState([]);
const userName = 'users name';
const userTagLine = '1234';
const apiKey = '???';
useEffect( () => {
axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
.then(response => {
console.log(response.data)
setPlayerData([response.data])
onPlayerLoad(response.data)
})
.catch(error => console.log(error))
}, []);
return <></>;
Coming to FetchMatch, you will have the data in its second rendering.
import React, { useState } from 'react';
// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = ({data}) => {
const [matchData, setMatchData] = useState([]);
//console.log(data);
return (
<div>
// players match list goes here
</div>
)
}
export default FetchMatch;
Now, you can do whatever you want with the shared data in second component which in your case is trigger match API. 🎉

How Do you display data from an api in React?

Weather.JS File
import { useEffect, useState } from "react"
import axios from 'axios'
import WeatherDisplay from './WeatherDisplay'
const Weather = ({capital, params}) => {
const [weather,setWeather] = useState([])
useEffect(async () => {
const result = await axios.get('http://api.weatherstack.com/current', {params})
console.log(result.data)
setWeather(result.data)
},
[params])
return(
<div>
<h2>Weather in {capital}</h2>
<WeatherDisplay current={weather.current}/>
</div>
)
}
export default Weather
WeatherDisplay.js File
const WeatherDisplay = ({weather}) => {
console.log(weather.current.temperature)
return (
<h1>{weather.current.temperature}</h1>
)
}
export default WeatherDisplay
Having issues display the data when i use {weather.current.temperature}, it keeps giving me an error pointed at temperuture saying it isnt defined but its apart of the data
You are passing weather.current as props. While the child component is expecting weather as prop. So, what you end up doing is weather.current.current.temperature which is undefined because it doesn't exist. Just pass weather to the child prop.
Make this change when calling your child component.
<WeatherDisplay weather={weather}/>

How can I setFriend with using of useState?

I'm trying to do some small exercises in react, but here I got some error:
Cannot read property 'name' of undefined
Could anyone help me, please?
import React, {useState, useEffect} from 'react';
import FriendProfile from './FriendProfile';
import Button from './Button';
const Friend = () => {
const [friend, setFriend] = useState({})
async function getFriend() {
try{
const response = await fetch('https://www.randomuser.me/api?results=1')
const data = await response.json()
const [item] = data.results;
setFriend(item)
}catch(err){
console.log(err)
}
}
useEffect(() => {
getFriend()
}, [])
return (
<div>
<Button getFriend={getFriend} />
<FriendProfile />
</div>
);
};
export default Friend;
and FriendProfile component is:
import React from 'react';
const FriendProfile = ({friend}) => {
return (
<ul>
<li>{friend.name.first}</li>
</ul>
);
};
export default FriendProfile;
You forgot to pass to <FriendProfile /> component the friend object. In the child component it tries to destructure like ({friend}) but there is no value there. That's why you are getting that error message.
Try to pass as the following:
<FriendProfile friend={friend} />
Then in the <FriendProfile> component you need to do the additional conditional rendering:
<ul>
{
friend.name &&
<li>{friend.name.first}</li>
}
</ul>
Technically we are checking if friend.name has value or not. Once the API call returned and updated the state, it will render the <li> element with the first name of the friend object.
I hope this helps!

Categories

Resources