For example i am having a component like this,
import React from "react";
export default const App = () => {
console.log("ComponrntName i.e App in this scenario")
return (
<div>
<p>Hello World</p>
</div>
)
}
how to get component name . (i.e) App in this scenario . Thanks
You can set the displayName to a functional component like App.displayName = "AppComponent";
and inside the function you can access it with App.displayName
import React from "react";
const App = () => {
console.log("ComponrntName:", App.displayName);
return (
<div>
<p>Hello World</p>
</div>
)
}
App.displayName = "AppComponent";
export default App;
class App extends Component {
constructor(props) {
super(props);
}
}
this.constructor.name
you will get the Component
Related
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>
);
}
I use the class component in my Cart.js file but it got the error as "render is not a function". I also try changing it into a function component but it's not working either, please help me to find a way to fix it! Thank you so much!
My sandbox link: https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-buz0u?file=/src/App.js
Cart component has error, because you're using Consumer from ProductContext in a incorrect way. Change it this code will solve the problem:
import React from "react";
const ProductContext = React.createContext();
export default class Cart extends React.Component {
render() {
return (
<div>
<ProductContext.Consumer>
{(value) => {
return <div>hello</div>
}}
</ProductContext.Consumer>
</div>
);
}
}
Please change your cart component
import React from "react";
const ProductContext = React.createContext();
export default class Cart extends React.Component {
render() {
return (
<div>
<ProductContext.Provider value={null}>
hello
</ProductContext.Provider>
</div>
);
}
}
To me it looks like a function is being passed and I am completely lost as for what to do to fix this error. I know passing this code directly to onChanged works, but for some reason when the onSearchChange method is passed as a parameter to the Searchbox it thinks it is an object
Here is the code in question
import "./tachyons";
import Searchbox from "./Searchbox";
import CardList from "./CardList";
import {robots} from "./robots";
class App extends React.Component {
constructor(){
super();
this.state = {
robots:robots,
searchfield:""
}
}
onSearchChange = (event)=>{
//console.log(event);
const filteredRobots = this.state.robots.filter(robots=>{
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
});
console.log(filteredRobots);
}
render () {
return (
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<Searchbox searchChange = {this.onSearchChange}/>
<CardList robots={this.state.robots}/>
</div>
);
}
}
export default App;
import App from "./App"
const Searchbox = (searchfield, searchChange)=>{
return (
<div className="pa2">
<input
className = "pa3 ba b--green bg-lightest-blue"
type="search"
placeholder="search robots"
onChange = {searchChange}
/>
</div>
);
}
export default Searchbox;
Your Searchbox component isn’t destructuring the props:
const Searchbox = (searchfield, onSearchChange)=>
vs.
const Searchbox = ({searchfield, onSearchChange})=>
You are using props wrong way in Searchbox component. You need to update like this:
const Searchbox = ({searchfield, onSearchChange})=>{...}
I am learning React
While working on Props, I have created a component and using that component in my index.jsx. But the values passed through props are not displayed on the UI.
usingprops.jsx
import React from 'react';
class UsingProps extends React.Component {
render() {
return (
<div>
<p>{this.props.headerProp}</p>
<p>{this.props.contentProp}</p>
</div>
);
}
}
export default UsingProps;
index.jsx
import React from 'react';
import UsingProps from './Props/UsingProps.jsx';
class App extends React.Component {
render() {
return (
<div>
<UsingProps />
</div>
);
}
}
const myElement = <App headerProp="Header from props!!!" contentProp="Content from props!!!" />;
ReactDOM.render(myElement, document.getElementById('root'));
export default App;
You are putting the headerProp on the App component, not the UsingProps component, which is where you are trying to access it. You need to revise it to this:
class App extends React.Component {
render() {
return (
<div>
<UsingProps headerProp="Header from props!!!" contentProp="Content from props!!!" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
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]