I am learning react js.
I am unable to call countrypicker component inside cards component in app.js.
Can someone please help me?
This is my cards.js
import React from 'react';
import './Cards.css';
const Cards = () => {
return(
<div class="Cards">
<p>Cards</p>
</div>
);
}
export default Cards;
this is my countrypicker.js
import React from 'react';
import './CountryPicker.css';
const CountryPicker = () => {
return(
<div class='CountryPicker'>
<p>CountryPicker</p>
</div>
);
}
export default CountryPicker;
I am calling both components from App.js
import React,{ Component } from 'react';
import Cards from './components/Cards/Cards';
import Chart from './components/Chart/Chart';
import CountryPicker from './components/CountryPicker/CountryPicker';
import './App.css';
class App extends Component {
render(){
return (
<div className='App'>
<p className='p1' style={{color:'White'}}><b><u>Covid-19 tracker app</u></b></p>
<div>
<Cards>
<div><CountryPicker title="India"/></div>
</Cards>
</div>
</div>
);
}
}
export default App;
You need to pass children as a props to Cards, like this:
const Cards = ({ children }) => {
return(
<div class="Cards">
<p>Cards</p>
{children}
</div>
);
}
Related
I want to pass my state value name to another component Context3.js without using props. I have use context api for creating context and through provider I have passed the value.
Now at Context3.js I am trying to consume it but at output screen I am unbale to see my output.
import './App.css';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context3/>
</div>
);
}
export default App;
The main component is App.js.
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import React, {Component} from 'react';
import { MyContext } from './Context1';
class Context3 extends Component{
render(){
return(
<div>
<MyContext.Consumer>
{
value => <h1> {value} </h1>
}
</MyContext.Consumer>
</div>
)
}
}
export default Context3;
strong text
You need to wrap your children with the ContextProvider (Context1)
import React, {Component} from 'react';
export const MyContext = React.createContext();
class Context1 extends Component{
state={
name: 'mohammed'
}
render(){
return(
<div>
<MyContext.Provider value={this.state.name}>
{this.props.children}
</MyContext.Provider>
</div>
)
}
}
export default Context1;
import './App.css';
import Context1 from './Components/Context1';
import Context3 from './Components/Context3';
function App() {
return (
<div className="App">
<Context1>
<Context3/>
</Context1>
</div>
);
}
export default App;
Imported component to my app.js file but it is not rendering?
I built a topbar-component in another file but not able to render the topbar-component in my app.js file.
APP.js >
import React from 'react';
import './App.css';
import topbarComponent from "./topbar";
function App() {
return (
<div className="App">
{topbarComponent}
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
Topbar.js>
import React from "react"
const topbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default topbarComponent
React component names should start with an uppercase letter. your topbarComponent should then become TopbarComponent.
Topbar.js
import React from "react"
const TopbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default TopbarComponent
Rendering a component is similar to returning html tags, where the angle brackets are used to do so. instead of {topbarComponent}, this would become
App.js
import React from 'react';
import './App.css';
import TopbarComponent from "./topbar";
function App() {
return (
<div className="App">
<TopbarComponent />
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
curly braces, which you have used, are used when wanting to return a value of a variable within the jsx (react elements)
I'm new at ReactJs and trying to learn ContextAPI but I'm having this error.I read titles about this situation but I can't reach to solution.Firstly I tried to re-install react as a old version but it didn't changed.I tried to wrap App inside of app.js instead of index.js but I had same result as it happens right now.
App.js
import React, { Component } from 'react'
import './App.css';
import UserFinding from './components/UserFinding';
class App extends Component {
render() {
return (
<div>
<UserFinding/>
</div>
)
}
}
export default App;
UserFinding.js
import React, { Component } from 'react'
import User from './User.js'
import UserConsumer from '../context.js'
export default class UserFinding extends Component {
render(){
return(
<UserConsumer>
{value=>{
const users=value;
return(
<div>
{
users.map(user=>{
return(
<User key={user.id} id={user.id} userName=
{user.userName} department={user.department}/>
)
}
)
}
</div>
)
}}
</UserConsumer>
)
}
}
User.js
import React, { Component } from 'react'
export default class User extends Component {
state={
isVisible:true
}
hideShowCard=()=>{
this.setState({
isVisible:!this.state.isVisible
})
}
deleteOnUser=()=>{
//Dispatch
}
render() {
return (
<div>
<div className="row">
<div className="col-sm-6">
<div className="card">
<div className="card-body">
<h5 className="card-title">{this.props.userName}<i onClick=
{this.deleteOnUser} className="fa fa-trash ml-2"></i></h5>
{this.state.isVisible ? <p className="card-text">
{this.props.department}</p>:null}
<div onClick={this.hideShowCard} className="btn btn-primary">
{this.state.isVisible ? "Hide" : "Show"}</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
context.js
import React,{Component} from 'react';
const UserContext=React.createContext();
export class UserProvider extends Component {
state={
users:[
{
id:1,
userName:"Ufuk Oral",
department:"Software Engineering"
},
{
id:2,
userName:"Emre Çorbacı",
department:"Data Science"
}
]
}
render(){
return (
<UserContext.Provider value={this.state}>
{this.props.children}
</UserContext.Provider>
)
}
}
const UserConsumer=UserContext.Consumer;
export default UserConsumer;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import UserProvider from './context.js';
ReactDOM.render(
<UserProvider><App/></UserProvider>,document.getElementById('root'));
serviceWorker.unregister();
these are my codes.
It looks like you are exporting and importing the content in context.js file wrong.
Instead of
import UserProvider from './context.js';
try something like this
import {UserProvider} from './context.js';
And how did you try to upgrade the react version? are you using create-react-app? if so you will have to update the react scripts as well. To upgrade to selected version you have to try something like this
npm install --save --save-exact react#x.xx react-dom#x.xx
or
yarn add --exact react#x.xx react-dom#x.xx
I am facing this problem when 'provider' is not added in the context component.
such that,
<AuthContext value={allContexts}>
{children}
I solved it, just added '.Provider'
such that,`
<AuthContext.Provider value={allContexts}>
{children}
</AuthContext.Provider>`
I want to change innerHTML of a div, when I click on the button. I don't know why, but instead of getting an error, or getting the expected result it deletes to content and replacing it with "[object Object]".
How can I get it work?
import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
function LoginOnClick(){
document.getElementById("wrapper").innerHTML = <SignIn />;
}
return (
<div className="container" id="wrapper">
<button onClick={LoginOnClick}>Login</button>
<Login />
</div>
);
}
export default App;
You can make use of Hooks (Added n React 16.8).
import React, {useState} from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
const [signIn, setSignIn] = useState(false);
return (
<div className="container" id="wrapper">
{signIn ? <SignIn /> : <> //This is React Fragments syntax
<button onClick={() => setSignIn(true)}>Login</button>
<Login />
</>
}
</div>
);
}
export default App;
With react you don’t have to set the innerHtml to do this, instead the more typical way is to have internal state in your component and conditionally render your SignIn component based off that. To use state the component either needs to be class or use hooks, classes are more traditional so I changed the component to be a class.
To make a class a react component you need to extend the class with the React.Component, this is because react components have lots of internal behaviours that you need to include with your class for it to be considered a component.
So
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signIn: false,
};
this.LoginOnClick = () => {
this.setState({ signIn: true });
};
}
render() {
if (this.state.signIn) {
return (
<div className="container">
<SignIn />
</div>
);
}
return (
<div className=“container”>
<button onClick={this.LoginOnClick}>Login</button>
<Login />
</div>
);
}
}
Here is a simple way to do it:
import {useState} from "react";
const App = () => {
const [txt, setTxt] = useState("");
setTxt(<p> 'Lorem ipsum dummy text blabla.' </p>);
return(
<div>
{txt}
</div>
)
}
export default App;
I am trying to develop a webapp using reactjs and i have a issue. After more than 1 day of research, i don't understand how to do.
I want to use a component which are the main layout of my page adding other component to display in it.
In the component Base2, the child props contains another component.
import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
const Base2 = (child) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
<child/> // HERE the dynamic component
</div>
);
export default Base2;
The function calling it is :
const TestBase = ({props}) => {
return (<Base child={MyComponent}/>)
};
Moreover MyComponent can be a class declare following 2 methods:
import React from 'react';
import LoginForm from '../components/LoginForm.jsx';
class MyComponent extends React.Component{
constructor(props) {
super(props);
...
}
render() {
return (
<LoginForm
onSubmit={this.processForm}
onChange={this.changeUser}
errors={this.state.errors}
user={this.state.user}
/>
);
}
}
export default LoginPage;
Second method :
import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
const MyComponent = {
render() {
return (<Card className="container">
<CardTitle title="React Application" subtitle="Home page." />
</Card>);
}
};
export default MyComponent ;
During my tests, only the second method works. The lack of "instance" (something like that i guess) from the second method might be the issue?
How can I develop Base2 component to take these 2 types of component declaration?
Thanks in advance for your help
First pass the component like this:
<Base child={<MyComponent/>}/>
Then render it inside Base2 component by props.child, the way you wrote the Base2 component, child (just the argument name) will have the value of props not directly the component you are passing in props.
Write it like this:
const Base2 = (props) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{props.child} //here
</div>
);
In the second method seems to be a simple json containing a render method. To create component in your second method which seems to be wrote in es5 you have to use react.createClass({ render ... })
Seek on internet you will find a lot of es5 example
With the help of #Mayank Shukla i found the best way to do.
import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
const Base2 = (props) => (
<div>
<div className="top-bar">
<div className="top-bar-left">
<NavLink to="/">React App</NavLink>
</div>
<div className="top-bar-right">
<Link to="/login">Log in</Link>
</div>
</div>
{props.child}
</div>
);
export default Base2;
The function calling it is :
const TestBase = (props) => {
return (<Base2 child={<MyComponent/>}/>)
};
First Method:
import React from 'react';
import LoginForm from '../components/LoginForm.jsx';
class MyComponent extends React.Component{
constructor(props) {
super(props);
...
}
render() {
return (
<LoginForm
onSubmit={this.processForm}
onChange={this.changeUser}
errors={this.state.errors}
user={this.state.user}
/>
);
}
}
export default LoginPage;
Second method :
import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';
const MyComponent = (props) =>{
return (<Card className="container">
<CardTitle title="React Application" subtitle="Home page." />
</Card>);
};
export default MyComponent ;