I have this code:
Sidebar.jsx
class Sidebar extends Component {
render() {
return (
<div className="sidebar">
{ this.props.children }
</div>
);
}
}
class Item extends Component {
render() {
return (
<div>
<b> { this.props.name } </b>
</div>
);
}
}
export { Sidebar, Item };
index.js
export {default as Header} from './Header';
export {default as Footer} from './Footer';
export {default as Sidebar, Item} from './Sidebar';
app.jsx
import { Sidebar } from '../components';
class App extends Component {
render() {
return (
<div>
<Header/>
<Sidebar>
<Sidebar.Item name='item1' />
<Sidebar.Item name='item2' />
<Sidebar.Item name='item3' />
</Sidebar>
<Footer/>
// ...
The error that I get is:
TypeError: Cannot read property 'Item' of undefined
How I can multiple export component in index.js and call from another file? I'm sure that Header and Footer work correctly because I have only one class in that file.
function Sidebar(props) {
return (
<div className="sidebar">
{ props.children }
</div>
);
}
function Item (props) {
return (
<div>
<b> { this.props.name } </b>
</div>
);
}
Sidebar.Item = {Item}
export default Sidebar
Then you can use it like this
import Sidebar from './Sidebar.js'
...
return (
<Sidebar>
<Sidebar.Item />
</Sidebar>
)
If you're using class based components, you can remove the curly braces
class Sidebar extends Component {
render() {
return (
<div className="sidebar">
{this.props.children}
</div>
);
}
}
class SidebarItem extends Component {
render() {
return (
<div>
<b> {props.name} </b>
</div>
);
}
Sidebar.Item = SidebarItem;
export default Sidebar;
I learned this practice from a coworker that saw it in semantic ui's table here.
Have you tried
import { Item } from '../components';
and then use it:
<Item name='item1' />
Related
import React from 'react'
import HornedBeast from './HornedBeast'
import './Main.css'
export class Main extends React.Component {
render() {
return (
<div>
<h1>Main Page</h1>
imageArr.map((item,index)=>{
return(
<HornedBeast
key={index}
imgUrl={item.image_url}
title={item.title}
description={item.description}
/>
)
})
</div>
)
}
}
export default Main
You need to wrap your javaScript inside the JSX in { ... }
import "./styles.css";
import React from "react";
export default class Main extends React.Component {
imageArr = [];
render() {
return (
<div>
<h1>Main Page</h1>
{this.imageArr.map((item, index) => {
return (
<HornedBeast
key={index}
imgUrl={item.image_url}
title={item.title}
description={item.description}
/>
);
})}
</div>
);
}
}
function HornedBeast() {
return <div></div>;
}
I written my code following a udemy course. I'm unable to render the Layout component's content is there anything I missed or any syntax mistakes that needs to be corrected to sort this out ?
const Aux = (props) => {props.children}
export default Aux;
import React,{Component} from 'react'
import Layout from './components/Layout/Layout';
class App extends Component
{
render() {
return (
<div>
<Layout>
<p>Hai.. Is this working ? </p>
</Layout>
</div>
);
}
}
export default App;
import React from 'react';
import Aux from '../../hoc/Auxx';
const layout = (props) =>(
<Aux>
<div>Toolbar,Sidebar,Backdrop</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;
You problem is that Aux is a blank component.
When you use the syntax const Aux = (props) => {props.children} you actually return nothing!
You see, javascript thinks that { } is the function itself and not return your props.children. Just remove the brackets:
const Aux = (props) => props.children;
I've modified your code as below:
const Aux = (props) => props.children // removed the {} so that it can return the children
export default Aux;
import React,{Component} from 'react'
import Layout from './components/Layout/Layout';
class App extends Component
{
render() {
return (
<div>
<Layout>
<p>Hai.. Is this working ? </p>
</Layout>
</div>
);
}
}
export default App;
import React from 'react';
import Aux from '../../hoc/Auxx';
const Layout = (props) =>( //changed the layout to Layout: it needs to be capitalized
<Aux>
<div>Toolbar,Sidebar,Backdrop</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;
I have this code for the App :
import React, {Component} from 'react';
import App1 from './App1';
class App extends Component {
render(){
return (
<>
<App1/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
export default App;
And this code is for the App1
import React, {Component} from 'react';
class App1 extends Component {
render() {
return (
<>
<button>Hide</button>
</>
);
}
}
export default App1;
I would like when I click on the Button to hide my div which displays "Hello". But I have no idea to do this ?
Could you help me please ?
Thank you very much !
You can hide the div in the parent component i.e (App.js) by using props. So here are the steps you need to follow:
create a function named as handleHide in App component, and pass it as a prop to App1 component.
Define a state named as hide in App component and pass it as a prop in App1 component.
Inside App1 component use the hide prop to change the text of button(it's bonus).
Assign handleHide function passed as prop from App to App1 component's button element's onClick .
Here are the files:
App.js
import React, { Component } from "react";
import App1 from "./App1";
class App extends Component {
state = {
hide: false
};
handleHide = () => {
this.setState({ hide: !this.state.hide });
};
render() {
return (
<>
<App1 handleHide={this.handleHide} hide={this.state.hide} />
<div>{!this.state.hide && <h1>Hello</h1>}</div>
</>
);
}
}
export default App;
And App1.js will be:
import React, { Component } from "react";
class App1 extends Component {
render() {
return (
<>
<button onClick={this.props.handleHide}>
{this.props.hide ? "Show" : "Hide"}
</button>
</>
);
}
}
export default App1;
You can see the full working code here.
Using class component is perfectly fine. You can use functional component to use react hooks it makes your code more readable and less code.
App.js
import React, { useState } from "react";
import App1 from "./App1";
export default function App() {
const [show, setShow] = useState(true);
return (
<>
<App1 setShow={setShow} show={show} />
<div>{show && <h1>Hello</h1>}</div>
</>
);
}
App1.js
import React from "react";
export default function App1({ setShow, show }) {
return (
<>
<button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
</>
);
}
You create a state in App.js and pass those state down to App1.js, which look like this
class App extends Component {
constructor(){
super();
this.state = {
hidden: false
};
this.changeHiddenStatus = this.changeHiddenStatus.bind(this)
}
changeHiddenStatus = () => {
this.setState(state => ({
hidden: !state.hidden
}))
}
render(){
return (
<>
<App1 handleClick={this.changeHiddenStatus}/>
<div>
<h1>Hello</h1>
</div>
</>
);
}
}
And then in the App1.js you did this
class App1 extends Component {
render() {
return (
<>
<button onClick={props.handleClick}>Hide</button>
</>
);
}
}
These are some basic React stuff, so if you don't get it I suggest you should read the React doc again.
Slightly new to react and playing around with lists, not sure why my code isn't performing as required, when I call the method it just displays plain html
Ive tried putting it between tags but nothing
Can someone point out what I'm doing wrong?
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import List from './List'
class App extends Component { //different
render() { //different
// The rest of the file is the same
return(
<div className="App">
Liste();
</div>)
};
}
function Liste(){
const names=['d','d']
return(<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>)
}
export default App;
Your Liste function is a functional component so it needs to be included like any other react component and not to be executed as a function. Just replace your return statement in your App component to
return(
<div className="App">
<Liste />;
</div>)
};
You can go through this link to learn the syntax - https://devhints.io/react
Try this out
const Liste = () => {
const names=['d','d']
return(
<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>
);
};
class App extends Component {
render() {
return(
<div className="App">
<Liste />
</div>
);
};
}
export default App;
Try this.
class App extends Component { //different
render() { //different
// The rest of the file is the same
return(
<div className="App">
{Liste()}
</div>)
};
}
function Liste(){
const names=['d','d']
return(<div>
<h2>{names[0]}</h2>
<h2> {names[1]}</h2>
</div>)
}
export default App;
I'm trying to figure out how to make components communicate with each other in React. I have a large component App. In it I have 2 components: ParentComponentOne and ParentComponentTwo. In ParentComponentOne I have a component called ChildParentOne. How can i render the ParentComponentTwo only when clicking on ChildParent One
App.jsx
import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';
class App extends Component {
state = {
show:{
componentTwo: false
}
};
render() {
return (
<div>
<ParentComponentOne />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne />
<div>some content</div>
<ChildParentOne />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
import React, { Component } from 'react';
class ChildParentOne extends Component {
render() {
return (
<div onClick={}>
BTN
</div>
);
}
}
export default ChildParentOne ;
Pass a callback into ParentComponentOne which would change show.componentTwo state when child of it is clicked:
class App extends Component {
state = {
show: {
componentTwo: false
}
};
childClicked() {
this.setState({
show: {
componentTwo: true
}
})
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
ParentComponentOne:
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne onBtnClick={this.props.childClicked} />
<div>some content</div>
<ChildParentOne onBtnClick={this.props.childClicked} />
</div>
);
}
}
Now, just pass this callback into ChildParentOne similarly and use it as a prop:
class ChildParentOne extends Component {
render() {
return (
<div onClick={this.props.onBtnClick}>
BTN
</div>
);
}
}