as you may get from the title, passing props in react is not working. And i don´t get why.
Main Ap Component
import './App.css';
import Licence from './Licence';
function App() {
return (
<>
<Licence>
test={"Test123"}
</Licence>
</>
);
}
export default App;
Other Component
import React from 'react';
const Licence = (props) => {
return (
<div>
<h1>name : {props.test}</h1>
</div>
)
}
export default Licence;
Problem
if i start the script and render the page, nothing is shown. What am I doing wrong?
Licence component looks good to me!
All you have to do is change up how you set it up on App. Props need to be passed on the tag, like this:
import './App.css';
import Licence from './Licence';
function App() {
return (
<>
<Licence test={"Test123"} />
</>
);
}
export default App;
update your App component:
```
<Licence
test={"Test123"} />
```
Pass like this
<Licence test={"Test123"} />
and access like this
const Licence = (props) => {
return (
<div>
<h1>name : {props.test}</h1>
</div>
)
}
Another way
<Licence>
Test123
</Licence>
access like this
const Licence = (props) => {
return (
<div>
<h1>name : {props.children}</h1>
</div>
)
}
Related
I am working with React + JS in an app to render news of the NYTimes (https://developer.nytimes.com/). Well, the matter is that I want to render the most viewed in the last 7 days, but organized through categories or sections. And I have the problem with the rendering of my sections.
Here my app.js component:
import React, {useEffect, useState} from "react";
import ListOfSections from "./components/ListOfSections";
import getSections from "./services/getSections";
import Navbar from "./shared/Navbar/Navbar";
function App() {
const [section, setSection] = useState([]);
useEffect(() => {
getSections().then(sections=>setSection(sections));
}, [])
return (
<div>
<Navbar/>
<ListOfSections section={section}></ListOfSections>
</div>
);
}
export default App;
Here my ListOfSections component:
import React from 'react';
import Section from './Section';
export default function ListOfSections ({section}) {
return (
<div className="container_list_sections mt-4 ml-4">
{
section.map(({section})=>
<Section
section={section}
/>
)
}
</div>
)
};
And here my Section component:
import React from 'react';
export default function Section ({section}) {
return (
<div>
<h1 className="section-container mr-4">{section}</h1>
</div>
)
};
Well, the problem is when I do console.log(section) in the Section component, it returns me undefined. But if I do console.log(section) in ListOfSections component, it has received the information of the props. So... why when I am passing the prop section from ListOfSections to Section, is it undefined? Where is it the error? I dont understand. The result for the moment is this one:
Thanks :)
Your useEffect should look as follows:
const [sections, setSections] = useState([]);
...
useEffect(() => {
getSections().then(sections=>setSections(sections));
}, [])
When you get data back it seems to be an array of sections so it should be a plural.
So when you pass sections down as a prop, it should be:
<ListOfSections sections={sections}/>
Which then allows you to map in <ListOfSections>
export default function ListOfSections ({sections}) {
return (
<div className="container_list_sections mt-4 ml-4">
{
sections.map(section =>
<Section
section={section}
/>
)
}
</div>
)
};
For maps, you should also set a key, you can read more here
Error I am getting: ./src/components/IconsOne.js Attempted import error: 'TiHome' is not exported from 'react-icons/fa'.
IconsOne.js:
import { TiHome } from 'react-icons/fa';
const IconsOne = () => {
return (
<div className="homeIcon">
<h3>
<TiHome />
</h3>
</div>
)
}
export default IconsOne
App.js
import './App.css';
import IconsOne from "./components/IconsOne";
function App() {
return (
<div className="App">
<Router>
<IconsOne />
</Router>
</div>
);
}
export default App;
I am trying to build a navbar and the first step is to render a home icon. I used this page for documentation on importing icons for react: https://react-icons.github.io/react-icons/ and the name of the Icon that I'm trying to import is TiHome
The link to the icon is: https://react-icons.github.io/react-icons/search?q=tihome
Thank you.
The problem is fa, that is not the path for Typicons but for FontAwesome, so if you want TiHome from Typicons then according to react-icons you must use instead the ti path, so:
import { TiHome } from 'react-icons/ti';
const IconsOne = () => {
return (
<div className="homeIcon">
<h3>
<TiHome />
</h3>
</div>
)
}
export default IconsOne
My component is defined as follows:
import React, { Component } from "react";
import HOCName from "./HOCName";
class Hello extends Component {
render() {
return <h1>{this.props.name}</h1>;
}
}
export default HOCName(Hello);
MY HOC is defined as follows:
import React from "react";
export default WrappedComponent => props => {
const age = 23;
return (
<div>
<WrappedComponent {...props} age={age} />
<button>say Hello</button>
</div>
);
};
My question is how can I retrieve my button in my Component "Hello" ?
Thanks in advance for your help
You can choose one of the solutions
Pass button as a child of the passed component
Pass the button as a prop to the WrappedComponent
Here is an example of the two solutions
https://codesandbox.io/s/96q5ll9k4
I am trying to figure out where my error is in my react js page
I have tried different things like changing it into a state component, return and render statements, etc. But its still giving me
"TypeError: Cannot read property 'map' of undefined
Recipes
src/components/Recipes.js:4
1 | import React from "react";
2 |
3 | const Recipes = (props) => (
4 |
5 | { props.recipes.map((recipe)=> {
6 | return (
7 |
View compiled"
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import InputForm from "./components/InputForm";
import Recipes from "./components/Recipes"
const API_KEY= "mykey";
class App extends Component {
state= {
recipes: []
}
getRecipe = async (e) => {
e.preventDefault();
const recipeName = e.target.elements.recipename.value;
const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&page=2`)
const data = await api_call.json();
this.setState({ recipes: data.recipes });
}
render() {
return (
<div className="App">
<header className="App-header">
React Cookbook
</header>
<InputForm getRecipe={this.getRecipe} />
<Recipes recipes={this.state.recipes} />
</div>
);
}
}
export default App;
Recipes.js
import React from "react";
const Recipes = (props) => (
<div>
{ props.recipes.map((recipe)=> {
return (
<div key={recipe.recipe_id }>
<img src={recipe.image_url} alt={recipe.title}/>
<h3>{ recipe.title }</h3>
</div>
)
})}
</div>
)
export default Recipes;
As Andrew notes in the comments, it sounds like the response from the server is undefined, and that's what is getting added to the recipes state object. You can check for this in the console. Are your API key and recipe name valid, for example? Are you accessing the correct part of the returned data?
As an aside, recipes in state is empty on the first render. You need to check for that possibility in your code. Here I've simply returned an empty div, but you could add a loading spinner or something there instead to provide useful feedback to the user.
render() {
const { recipes } = this.state;
if (!recipes.length) return <div />;
return (
<div className="App">
<header className="App-header">
React Cookbook
</header>
<InputForm getRecipe={this.getRecipe} />
<Recipes recipes={recipes} />
</div>
);
}
I am practicing React native. When I compile the following program, I am getting Cannot read property 'props' of undefined error for Details.js. Kindly let me know as to what went wrong here.
Layout.js
import React, {Component} from 'react';
import Header from './Header';
import Details from './Details';
export default class Layout extends React.Component {
constructor(props){
super(props);
this.state = {
heading: "Welcome no-name guy!",
header: "I am your header",
footer: "I am your footer"
};
}
render() {
return (
<div>
<Header headerprop={this.state.header} />
<Details detailprop={this.state.heading} />
</div>
);
}
}
Details.js
import React from 'react';
const Details = (detailprop) => {
return (
<div className="heading-style">{this.props.detailprop}</div>
);
};
Details.bind(this);
export default Details;
Header.js
import React, {Component} from 'react';
export default class Header extends React.Component {
render(){
return(
<div>{this.props.headerprop}</div>
);
}
}
In functional components, the props are passed as the first parameter. So, you only need to do this:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
If you know the prop that you want to handle you can destructure that prop:
const Details = ({ detailProp }) => {
return (
<div className="heading-style">{detailprop}</div>
);
};
Your component argument should be props:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
It could be detailprop as you have (or anything for that matter) but you would then need to access the prop by the confusing call:
detailprop.detailprop
props is the idiomatic approach for React.
Details.js is a stateless functional react component. https://facebook.github.io/react/docs/components-and-props.html
It receives props as its argument. You don't need this here.
import React from 'react';
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
Details.bind(this); // you don't need this
export default Details;
Also, div elements will not work for react-native . Please refer react native docs https://facebook.github.io/react-native/