what is the best way for me to use logic to wrap the component? I would like to have another span to wrap Child component if showSpan is true, maybe something like following, but it does not work
const Child = () => {
return <button>click me</button>;
};
const Home = (props: { showSpan: boolean }) => {
const { showSpan } = props;
return (
<div>
{showSpan && (<span> ssss)}
<Child />
{showSpan && (</span>)}
</div>
);
};
export default function App() {
return (
<div className="App">
<h1>
<Home showSpan={false} />
</h1>
</div>
);
}
You could use Fragment (empty tag) to be the alternative to span and use them as wrapper. Should work like this:
const Child = () => {
return <button>click me</button>;
};
const Home = (props: { showSpan: boolean }) => {
const { showSpan } = props;
const Wrapper = showSpan ?
({children}) => <span>ssss {children}</span> :
({children}) => <>{children}</>;
return (
<div>
<Wrapper>
<Child />
</Wrapper>
</div>
);
};
export default function App() {
return (
<div className="App">
<h1>
<Home showSpan={false} />
</h1>
</div>
);
}
Related
it's very complicated to explain the whole use-case here because I have deeply nested component, but I will try to show the concept.
How to display age from parent in OneMoreNestedChild without ContextApi, is it possible in the following example ?
Codesandbox
import React from "react";
import "./styles.css";
const OneMoreNestedChild = ({ age }) => {
return (
<>
<p>One more nested child</p> Age: {age}
</>
);
};
const NestedChild = ({ children }) => {
return (
<>
<p>Nested children</p> {children}
</>
);
};
const Child = ({ children }) => {
return (
<>
<p>Child</p> {children}
</>
);
};
const Parent = ({ children }) => {
const newChildren = React.Children.map(children, (child) =>
React.cloneElement(child, { age: 1 })
);
return <div>{newChildren}</div>;
};
export default function App() {
return (
<div className="App">
<Parent>
<Child>
<NestedChild>
<OneMoreNestedChild />
</NestedChild>
</Child>
</Parent>
</div>
);
}
_app.js
function MyApp({Component, pageProps}) {
const tawkMessengerRef = useRef();
function Maximize() {
if (tawkMessengerRef) {
tawkMessengerRef.current.maximize()
}
}
return (
<>
<div className="App">
<TawkMessengerReact
propertyId="x"
widgetId="y"
ref={tawkMessengerRef}/>
</div>
<Component {
...pageProps
} />
</>
)
}
components/layout.js
export default function Layout({children}) {
return (
<>
<Button onclick={Maximize}/>
<>)}
The questions is - how do I call Maximize function from child component?
I was trying to convert the React component below to arrow function.
import { Jsme } from 'jsme'
export default class App extends Component {
logSmiles(smiles) {
console.log(smiles)
}
render () {
return (
<div>
<Jsme height="300px" width="400px" options="oldlook,star" onChange={this.logSmiles}/>
</div>
)
}
}
I have tried doing this by converting react component to the arrow function. Need help
export const Jsme = () => {
logSmiles =(smiles)=> {
console.log(smiles)
}
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={this.logSmiles}
/>
</div>
);
};
You're looking at the <App /> component, so it would look like this
import { Jsme } from 'jsme'
const App = () => {
const logSmiles = (smiles) => {
console.log(smiles)
}
return (
<div>
<Jsme height="300px" width="400px" options="oldlook,star" onChange={logSmiles}/>
</div>
)
}
export default App;
It should be:
export const Jsme = () => {
const logSmiles = (smiles) => {
console.log(smiles)
}
return (
<div>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={logSmiles}
/>
</div>
);
};
I have implemented an app which uses react-router to handle the routes in my web-app. I want to trigger the function logintoggle which is on the Header.js component from a function from the Hompage.js component. The App.js has all the routes in one file.
Can anyone explain to me how this can be achieved with small code snippet?
App.js
render() {
const { location } = this.props;
return (
<IntlProvider
locale="a"
messages="s"
>
<Fragment>
<div>
<Headers />
<Switch>
<Route exact path="/women" component={HomePage} />
</Switch>
</div>
</Fragment>
</IntlProvider>
);
}
}
export default App;
Header
class Header extends React.Component {
constructor(props) {
super(props);
}
logintoggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
}
Homepage.js
class CheckOut extends Component {
constructor(props) {
super(props);
}
}
When you need to have a shared state among the components React.Context API is what you need. It allows you to create a separate context provider, which will provide the state and the methods to manipulate this state to all the components you need. In the example below I have a LoginContextProvider with activeTab state variable. I provide activeTab and setActiveTab to all the components inside LoginContextProvider's children. Header changes activeTab to 1, Homepage changes to 2 and LoginContextDebug represents the actual activeTab value.
const LoginContext = React.createContext(null);
const LoginContextProvider = ({ children }) => {
const [activeTab, setActiveTab] = React.useState(0);
return (
<LoginContext.Provider value={{ setActiveTab, activeTab }}>
{children}
</LoginContext.Provider>
);
};
const Header = () => {
// Use setActiveTab here
const { setActiveTab } = React.useContext(LoginContext);
return (
<div>
<h1>I am header</h1>
<button onClick={() => setActiveTab(1)}>Set activeTab to 1</button>
</div>
);
};
const Homepage = () => {
// Use setActiveTab here
const { setActiveTab } = React.useContext(LoginContext);
return (
<div>
<h1>I am homepage</h1>
<button onClick={() => setActiveTab(2)}>Set activeTab to 2</button>
</div>
);
};
const LoginContextDebug = () => {
const { activeTab } = React.useContext(LoginContext);
return (
<pre style={{ padding: 10, background: "lightgray" }}>
activeTab={activeTab}
</pre>
);
};
const App = () => (
<LoginContextProvider value={null}>
<Header />
<Homepage />
<LoginContextDebug />
</LoginContextProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<div id="root"></div>
As a beginner, I'm trying to put my list of "clients" in a function to display in the route/component, is this possible?
App.js
render() {
return (
<div className = "App">
<div>
<AddCliente onAdd = {this.onAdd} />
</div>
<Router>
<div>
<Link to = "/">Cli</Link>
<Route path = "/" exact component = {Adde} />
</div>
</Router>
</div>
);
}
}
I wanna do this:
function Adde() {
return <div>
{
this.state.clientes.map(cliente => {
return (
<ClienteItem
key = {cliente.nome}
{...cliente}
onDelete = {this.onDelete}
/>
);
})
}
</div>;
}
export default Add;
Error:
TypeError: Cannot read property 'state' of undefined
You can do something like this in your component.
import React, { Component } from 'react';
class componentName extends Component {
constructor(props) {
super(props);
this.state = {
clients:[
{
name:'sdfd',
title:'sdfd'
}
]
};
}
Adde=()=>{
return(
<div>
{
this.state.clientes.map(cliente => {
return (
<ClienteItem
key = {cliente.nome}
{...cliente}
onDelete = {this.onDelete}
/>
);
})
}
</div>
);
}
render() {
return (
<div className = "App">
<div>
<AddCliente onAdd = {this.onAdd} />
</div>
<Router>
<div>
<Link to = "/">Cli</Link>
<Route path = "/" exact component = {Adde} />
</div>
</Router>
</div>
);
}
}
export default componentName;