We Keep Coding

Passing props in React from one file to another

In the below code I want to pass name from Person.js to App.js as prop.But I can't understand how to do it.If you can please explain me how to do that.
App.js
import { useState,useEffect } from 'react';
// import Person from './Person'
function App(props) {
const [greet, setGreeet] = useState("");
return (
<div className="App">
<h1> Good {greet} </h1>
</div>
);
}
export default App;
Person.js
import React from 'react';
import App from './App'
export default function Person (){
const name="Jenifer"
return(
<div></div>
);
}

passing name as prop from person.js(Parent Component) to App.js(Child Component)
Person.js
import React from 'react';
import App from './App'
export default function Person (){
const name="Jenifer"
return(
<div>
<App name={name}/>
</div>
);
}
App.js
import { useState,useEffect } from 'react';
// import Person from './Person'
function App(props) {
const [greet, setGreeet] = useState("");
return (
<div className="App">
<h1> Good Morning {props.name} </h1> // Good Morning Jenifer
</div>
);
}
export default App;
checkout this blog post Passing props between components

I think you are asking for how to pass data from child to parent.
You have to pass a method from App to Person.
And call the method from Person component.
Also please see the docs
https://reactjs.org/docs/lifting-state-up.html
function Person (props){
const {setNameToApp} = props;
const name = "Jennifer";
// this useEffect is called when the component mounts for the first time
React.useEffect(()=>{
setNameToApp(name);
},[])
// I have also shown how to use button to change the greet state in the app.
return (
<div>
<button onClick={()=>{setNameToApp("name when I pressbutton")}}> Set Name </button>
</div>)
}
function App(props) {
const [greet, setGreet] = React.useState("");
// pass setGreet function to components which can call this and change the state of the greet
return (
<div>
<h1> Good {greet} </h1>
<Person setNameToApp = {setGreet} />
</div>
);
}

Finally I found the reason for this.This happened because I tried to pass data from my child class to parent class.It is impossible to do so.

Passing property as pros in react functional component

I am in the process of learning react. Here i got stuck in some basic problems. I learn concept of props and parent-child components in react, but when i try to implement it, it shows error. Please help. I have one parent component named 'Portfolio' and one child component named 'PortfolioBox'. I try to pass title props in PortfolioBox. Here is my sample code. Issue comes while starting the react app 'npm start'. It shows error 'Portfolio is not defined'.
Portfolio Component
import React from 'react';
import PortfolioBox from './PortfolioBox';
import './portfolio.css';
function Portfolio()
{
return (
<div className="row portfolio-container">
<PortfolioBox title="One" />
<PortfolioBox title="Two" />
<PortfolioBox title="Three" />
<PortfolioBox title="four" />
</div>
)
}
export default Portfolio;
Portfolio Box Component
import React from 'react';
function PortfolioBox(props)
{
console.log(props);
return(
<div className="col-md-4 portfolio-box">
<h3>{props.title}</h3>
<p>Description</p>
</div>
)
}
export default PortfolioBox;
App.js File
import React from 'react';
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

You are missing an import statement in your app.js file:
import React from 'react';
import Portfolio from './Portfolio'; // If your file is in the same directory
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;

Should I hardcode data or use props in React?

I am new to React and was wondering if we have to use hardcode data like this:
import React from "react";
import "../src/App.css";
const header = props => {
return (
<header>
<h1>Content Manager</h1>
</header>
);
};
export default header;
import React, { Component } from "react";
import Header from "../src/header";
class App extends Component {
render() {
return (
<div>
<Header />
</div>
);
}
}
export default App;
As you can see the code above, I just put "Content Manager" inside h1 as a usual content just like we do in HTML. Or do I need to use props instead of hardcoding:
import React from "react";
import "../src/App.css";
const header = props => {
return (
<header>
<h1>{props.title}</h1>
</header>
);
};
export default header;
import React, { Component } from "react";
import Header from "../src/header";
class App extends Component {
render() {
return (
<div>
<Header title={"Content Manager"} />
</div>
);
}
}
export default App;
Guys if something is not clear please let me know

Basically If you want to reuse a component you should be using props.
Example:
When you need same header component for 3 places saying "Welcome","Hello" and "Hi" and have hard coded you will result in writing 3 header components with your heading as "Welcome","Hello" and "Hi".
something like this:
const HiHeader = props => {
return (
<header>
<h1>Hi</h1>
</header>
);
};
export default HiHeader;
const HelloHeader = props => {
return (
<header>
<h1>Hello</h1>
</header>
);
};
export default HelloHeader;
const WelcomeHeader = props => {
return (
<header>
<h1>Welcome</h1>
</header>
);
};
export default WelcomeHeader;
and you use them as
<HiHeader/>
<HelloHeader/>
<WelcomeHeader/>
in case, if you use props you can write a single header and pass different props.
example :
const header = props => {
return (
<header>
<h1>{props.title}</h1>
</header>
);
};
export default header;
import Header from './header.js'
<Header title="Hi"/>
<Header title="Hello"/>
<Header title="Welcome"/>

If your header component going to be reused to display different headers pass in the text as a prop. Else, if you are dead sure that this is gonna be used only once, hard coding is fine.
Cheers,

Never hardcoding, it's the evil!

Using custom tag to reference ReactJS components inside ReactJS application

I have a ReactJS basic project which is working fine with the following two files (among others):
Header.js
import React from 'react'
const Header = () => (
<div>THIS IS A HEADER</div>
)
export default Header
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'
class App extends Component {
render() {
return (
<div>
<Header />
<div>
Hello World! This is the content.
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
What I want to know is:
How can I reference the Header component with a custom tag, for example: <comp-header /> instead of: <Header />. Something like below:
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'
class App extends Component {
render() {
return (
<div>
<comp-header />
<div>
Hello World! This is the content.
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
Any idea on how to do that?
Thanks!

You can simply
import CompHeader from './Header'
and use normally.
I don't think you can use a dash in JSX and JSX elements that are non native elements need to be capitalized.

cannot find module error in using react and redux

Line no.3 below, I got unexpected cannot find module error in my console. It's so strange, my code and file structure look just fine.
import React from 'react';
import UserList from '../containers/user-list';
import UserDetail from '../containers/user-detail';
require('../../scss/style.scss');
const App = () => (
<div>
<h2>Username List:</h2>
<UserList></UserList>
<hr />
<h2>User details</h2>
<UserDetail />
</div>
);
export default App;

As per es5 syntax you can not require like this in line 4 you have to code like this:
If your app.js is in components then it would solve your problem:
import React from 'react';
import UserList from '../containers/user-list';
import UserDetail from '../../containers/user-detail';
var style = require('../../../scss/style.scss');
const App = () => (
<div>
<h2>Username List:</h2>
<UserList></UserList>
<hr />
<h2>User details</h2>
<UserDetail />
</div>
);
export default App;