Creating react class with several components - reactjs

I'm learning react and can create components in different js files. But I would like to know if there is a way to create Main class with sub1 and sub2 components. And call components like this
import Main from './dir/main';
export default class Settings extends React.Component {
render () {
return (
<div>
<Main.sub1>
<Main.sub2/>
</div>
)
}
}


I think you can try something like that because you have an instance so you have to surround it
import Main from './dir/main';
import React from 'react';
export default class Settings extends React.Component {
render () {
return (
<>
<div>
<Main.sub1 />
<Main.sub2 />
</div>
</>
)
}
}

Related

ReactJS display return value from component class that extends React.Component

I have a component that I want to show in another site.
components/Hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div><p>Hello</p></div>
)
};
};
Now I want to import it into my site named "Profile.js".
pages/Profile.js
import React from 'react';
import Hello from '../components/Hello';
export default function Profile() {
return(
<div>
{/* Say hello*/}
{Hello}
</div>
);
}
What am I doing wrong? Why wont it say hello on my "Profile.js" page?

React syntax for rendering components is as follow :
export default function Profile() {
return(
<div>
{/* Say hello*/}
<Hello/>
</div>
);
}

Import a props since an other file for a component ReactJs

i have a question about the range of the props. I would in my App.js just call the component with 2 props (just below) and use those props in my other file "PrimaryButton.js".
function App() {
return (
<div className="App">
<PrimaryBouton Type='primary' Title='Lorem Ipsum'/>
</div>
);
}
export default App;
Here is my other file :
import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render(props) {
return (
<button className={props.Type}>
<span>{props.Title}</span>
</button>
);
}
}
export default PrimaryBouton ;
My Goal is to use the props on App.js to define here the css class of my button and his span.
I don't really know how to "import my props" in this file so if someone can help me thx !

To utilize props in your case, it would look like this:
import './PrimaryButton.css';
import React from 'react';
class PrimaryBouton extends React.Component {
render() {
const { title, type } = this.props;
return (
<button className={type}>
<span>{title}</span>
</button>
);
}
}
export default PrimaryBouton;
I would recommend naming your props lowercase opposed to uppercase. There are instances where you will eventually pass props as uppercase, like passing a component via props, so naming it uppercase generally indicates that.

Functional Components to Class Components

So I realized that now when we create a react app, it is by default in functional. So I was wondering if there was any way to change that into classes.

You can chang your existing functional component to class based component like this
export default class App extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
I would suggest you to go through react documentation which has everything explained very well with working excercises.
Check it -
React documentation

if your App.js code looks like this:
import React from "react";
export default function App() {
return (
<div className="App">
<h1>REACT APP</h1>
</div>
);
}
You can turn it into a class based component by importing Component and a bit of refactor like below:
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<div className="App">
<h1>REACT APP</h1>
</div>
);
}
}
The class App will extend Componment
Your JSX will be returned in the render() function of your class

How to send data from one component to another in nextjs

I'm working in nextjs.I have header component and in order to show header in all other pages ,overrided app.js with _app.js .Header has 2 navigation link usersList and users.
Now I want to send data from header component to another page say usersList and users on click of submit in header.How we can achieve that .
I know that we can use context .I'm using class based component don't know weather we can use context.
Is there any other solution to this problem..
Please help
header.js
class HeaderComponent extends Component {
onSearch(event){
//some code
}
render() {
return (
<div className="navbar">
<Input id="search-input" className="text-box" placeholder="Enter name or Email.." onKeyDown={($event)=>this.onSearch($event)} prefix={<Icon type="search" onClick={()=>this.onSearch} ></Icon>}></Input>
</div>
)
}
}
export default HeaderComponent
Layout.js
import React, { Component } from 'react';
import Header from './Header';
class Layout extends Component {
render () {
const { children } = this.props
return (
<div className='layout'>
<Header />
{children}
</div>
);
}
}
_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
userList.js
class AppUser extends Component {
render() {
return (
<Table
rowKey={data._id}
columns={this.columns1}
onExpand={this.onExpand}
dataSource={data}
/>
)
}
}
EDIT :
can we achieve it through props

You can use ReactRedux to create a store and have it accessible from all components.
https://redux.js.org/api/store [1]

How do I import an SVG to a class-based child-component in React?

I am able to import the svg in the parent component App.js(in the src folder) but not in the child component Home.js(src/components/Home.js)
When I import directly into the parent component the svg displays perfectly but if I import in the child component it says
Module not found: Can't resolve './img/BulbOn.svg' in 'E:\Website Work\Current Work\parsa_ventures\src\components'
import './App.css'
import Home from './components/Home'
function App() {
return (
<div>
<Home />
</div>
)
}
export default App
import BulbOn from './img/BulbOn.svg'
class Home extends React.Component {
render() {
return (
<div>
<img src={BulbOn} alt="text" />
</div>
)
}
}
export default Home
I am new to react so I am wondering if I can easily import svg in child component without having to use props.
my folder structure paths,
Website Work/Current Work/parsa_ventures/src/App.js (Parent)
Website Work/Current Work parsa_ventures/src/components/Home.js (Child) Website Work/Current Work/parsa_ventures/src/img/BulbOn.svg (Image)
i put the react boilerplate inside parsa_ventures, so thats where the src is containing all the files

you are using ./img which means E:\Website Work\Current Work\parsa_ventures\src\components\img\BulbOn.svg should exist.
please check your paths,
you need to put ./../img/BulbOn.svg should work.
try below code,
import BulbOn from './../img/BulbOn.svg'
class Home extends React.Component {
render() {
return (
<div>
<img src={BulbOn} alt="text" />
</div>
)
}
}
export default Home

Check your path from the child component as it seems you have missed one folder and then try.
Also, you can pass the svg image from parent to child component.
import React from 'react';
import Logo from '../../logo.svg';
class Test extends React.Component {
render() {
return (
<div>
<img src={this.props.url} alt="text" />
</div>
)
}
}
export default Test
In parent component, pass svg path url to child component - Test.
<Test url={Logo} />

Resources