Creating A react component which can be nested - reactjs

I am trying to create a component which can be reused in another component.Suppose i have a component like this
import React from 'react';
export default class Container extends React.Component {
render() {
return (
<div className='col-md-4/6/7'>
<div className='bg-dark'>
.......... Content Goes Here .............
</div>
</div>
);
}
}
Then i want to use the component like this...
import React from 'react';
export default class Container extends React.Component {
render() {
return (
<Container col md={4}>
.......... Content Goes Here .............
</Container>
);
}
}
I cant achieve that .It can be somewhat {this.state.children} but dont know how can achieve it

Simply edit the Container to render children:
import React from 'react';
export default class Container extends React.Component {
render() {
return (
<div className='col-md-4/6/7'>
<div className='bg-dark'>
{ this.props.children }
</div>
</div>
);
}
}
And then use it:
<Container col md={4}>
Hello, world!
</Container>
The children prop is explained in detail here: https://reactjs.org/docs/composition-vs-inheritance.html

Props.children
const Wrapper = (props) => <div>{props.children}</div>
const Inner = (props) => <Wrapper>some text or component</Wrapper>

Access using this.props.children because it's class based component. if it's functional component access using props.children
export default class Container extends React.Component {
render() {
return (
<div className='col-md-4/6/7'>
<div className='bg-dark'>
{this.props.children}
</div>
</div>
);
}
}

Related

Splitting code into files using context api

I'm using context API for the first time.I can understand how to write the code in a single page.But I can't understand how to split it into several files.When I split it as below it gives me an error saying that I have not exported MyProvider.But I have done it.I searched for many video tutorials but I couldn't find a one that matches to my problem
App.js
import {MyProvider} from './Context';
import {myContext} from './Context';
class Name extends Component {
render() {
return (
<div>
<myContext.Consumer>
{(context) => (
<React.Fragment>
<h1>Hello, {context.state.name}</h1>
<h3>{context.state.address}</h3>
</React.Fragment>
)}
</myContext.Consumer>
</div>
);
}
}
class Age extends Component {
render() {
return (
<div>
<myContext.Consumer>
{(context) => (
<React.Fragment>
<h1>You are {context.state.age} years old</h1>
<h3>You were born in - {context.state.dob}</h3>
</React.Fragment>
)}
</myContext.Consumer>
</div>
);
}
}
class App extends Component {
render() {
return (
<MyProvider>
<div className="App">
<Name />
<Age />
</div>
</MyProvider>
);
}
}
export default App;
Context.js
export const myContext = React.createContext();
class MyProvider extends Component {
state = {
name: "Sam",
address: "No.35,Main Street,Galle",
age: 50,
dob: "1970-10-21"
}
render() {
return (
<myContext.Provider value={{
state: this.state
}}>
{this.props.children}
</myContext.Provider>
)
}
}
export default MyProvider;
You have a mistake in import. When you export as default, you should import it without curly braces.
export default CLASS
import CLASS from
Or you can export your class as export class, then you will import it as you do:
export class A
import { A }
UPD:
Please take a look at
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Pass props between siblings (React)

I've got this functional component
import React from 'react'
function Header(){
return(
<div className='header'>
<h2>Logo</h2>
<p>Log In</p>
</div>
)
}
export default Header
When I will clicked on "Log In" I want to change my background-color in this class in class 'MainContainer'. Im a beginner in React. How Can I do it?
import React from 'react'
import RegistrationForm from '../LoginPage/RegistrationForm'
import './style2.scss'
class Main extends React.Component{
constructor(param){
super(param)
}
render(){
return(
<div className="mainContainer">
<RegistrationForm/>
</div>
)
}
}
export default Main
EDIT: Here is the class where I called this classes:
import React from 'react'
import Header from './components/LoginPage/Header'
import Main from './components/LoginPage/Main'
function App() {
return (
<div>
<Header/>
<Main/>
</div>
)
}
export default App;
Props can be passed from parent to child, not between siblings. So make a state in the App component and pass it down to Main and Header.
App
function App() {
const [loggingIn, setLoggingIn] = React.useState(false);
return (
<div>
<Header setLoggingIn={setLoggingIn} />
<Main loggingIn={loggingIn} />
</div>
)
}
Main
class Main extends React.Component{
constructor(param){
super(param)
}
render(){
return(
<div className="mainContainer" style={{ background: this.props.loggingIn ? 'red' : 'inherit' }}>
<RegistrationForm/>
</div>
)
}
}
Header
function Header({ setLoggingIn }){
return(
<div className='header'>
<h2>Logo</h2>
<p onClick={() => setLoggingIn(true)}>Log In</p>
</div>
)
}

Passing function to Component in React

Hi the previous answers to similar Questions doesn't help me.
I have the App Component:
import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";
class App extends React.Component {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
condition: true
};
}
onButtonClick() {
console.log("clicked...");
this.setState({
condition: !this.state.condition
});
}
render() {
return (
<div className="App">
<Header />
<Menu condition={this.state.condition} />
<Board />
</div>
);
}
}
export default App;
the MenuIcon Component:
import React from "react";
import "../css/main.css";
class MenuIcon extends React.Component {
render() {
return (
<div className="Menu_icon" onClick={this.props.onButtonClick}>
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
</div>
);
}
}
export default MenuIcon;
and the Menu Component
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
and the Header Component
import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";
class Header extends React.Component {
render() {
return (
<div className="Header_container">
<MenuIcon onButtonClick={this.props.onButtonClick} />
<div className="Header_headline">Notes</div>
</div>
);
}
}
export default Header;
I want to trigger the onButtonClick defined in App.js every time when I click on the MenuIcon. And then the Menu should fade in or out. The animation is done with css.
I dont find my mistake?
Could someone please help me?

Passing method child's component to another 'external' component in ReactJS

I'm new to ReactJs, coding and this is my first time posting here! So, I'm trying to build a Todo app in ReactJs. I have four components.
the first compo. is App.js - the parent one
import React, { Component } from 'react';
import TaskTodo from './TaskTodo';
import './App.css';
import TaskDisplayed from "./TaskDisplayed";
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Hey, i'm the header! </h1>
</header>
<div className="App-intro">
<TaskTodo/>
</div>
<div className="App-right">
<TaskDisplayed/>
</div>
</div>
);
}
}
export default App;
TaskTodo.js - which is the parent of the TodoItems.js
import React, {Component} from 'react';
import TodoItems from './TodoItems';
export default class TaskTodo extends Component{
constructor(props) {
super(props);
this.state = {
items: []
};
this.addItem = this.addItem.bind(this);
};
addItem(e) {
const itemArray = this.state.items;
if (this._inputElement.value !== "") {
itemArray.unshift(
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});
this._inputElement.value = "";
}
e.preventDefault();
}
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input type="text" ref={(a) => this._inputElement = a}
placeholder="Add a list">
</input>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
}
TodoItems.js - the child of the TaskTodo.js
import React, { Component } from 'react';
class TodoItems extends Component {
constructor(props) {
super(props);
this.createTasks = this.createTasks.bind(this);
}
handleClick = (text) => {
console.log(text);
}
createTasks(item) {
return <li key={item.key}><a onClick={() => this.handleClick(item.key, item.text)} href={'#about'}>#{item.text}</a></li>
}
render() {
const todoEntries = this.props.entries;
const listItems = todoEntries.map(this.createTasks);
return (
<ul className="theList">
{listItems}
</ul>
);
}
};
export default TodoItems;
What I need to do, is how I can pass the handleClick method (a child's of TaskTodo) to an 'external' component - TaskDisplayed.js; or how I can track when the user click to a listed item? Please pardon me for this unprofessional way of asking! But, I truly need to get in track with ReactJS! Thanks!
p.s. The above code I found online, so thanks for that :D!
You should define the onClick event handler in the parent component and pass it to the child as a prop.
See How to pass an event handler to a child component in React
In this case, you would want to define it in the App component since that is the parent of the two components that need to communicate.

Communicating between independent components react

I have been facing a problem, I would like to write a div every time a specific button is clicked, but the button is in one component and the menu in which I want the div to be created is in another component as well , and both main components are in one component, is there a way of making this happen? So the structure of it all is something like this:
This is the root component with the smaller components in it:
export class Root extends React.Component {
render() {
return(
<div className="Body">
<div id="SideBar" ><SideMenu/></div>
<MenuCocktails/>
<MenuBeers/>
<MenuVines/>
<MenuLemonades/>
<MenuSoftDrinks/>
<MenuCollection/>
<MenuCharger/>
<div id="BottomMenu"><BottomMenu/></div>
</div>
)
}
}
this is the menu that I wanted to div to be created in:
export class BottomMenu extends React.Component{
constructor() {
super();
this.state = {
shown: ''
};
}
toggleMenu = () => {
this.setState({shown: this.state.shown ? '' : 'visible'});
}
render() {
return(
<div>
<button
id="button"
className={this.state.shown}
onClick={this.toggleMenu}
>
My Cart
</button>
<div id="Header" className={this.state.shown}>
<button id="CheckOutButton">Check Out</button>
</div>
</div>
);
}
}
and this is one of the components with the button:
import React from "react";
import styles from "./MenuCocktails.css";
import plus from "./plus.png";
export class NiğdeGazozu extends React.Component{
render() {
return (
<div id="menu-items-1">
<div id="item-name">NIĞDE GAZOZU</div>
<div id ="price-item">8 TL</div>
<button id="plusbutton"><img src={plus}/></button>
</div>
);
}
}

Resources