I'm new to React and trying to understand using props with conditional rendering. I have a component called Intro.js inside my app.js.
My goal is to click a button on a form in Intro.js and remove Intro from app.js I've been able to accomplish this with a button in app.js but not within Intro.js. How would I get this to work within the child component Intro.js
const [introSection, setIntroSection] = useState(false)
{
introSection ? <Intro /> : true
}
<Button onClick={() => setIntro(false)}> Remove Intro Section</Button>
Firstly, your state update is also not aligned with the actual function. It should be setIntroSection instead of setIntro
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
You're almost there with your logic. You just need to modify your logic like below
{
introSection ? <Intro /> : null
}
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
But this is not a good way when we have a very complex structure in the true path, so I personally prefer this way
{introSection && <Intro />} //when it's false, nothing is rendered
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
If you want to do it inside Intro, you can pass a prop
<Intro isHidden={true} />
And in Intro, you can have this logic
const Intro = ({ isHidden }) => {
if(isHidden) {
return null
}
//true path to render your own component
return <div></div>
}
You should pass your setIntro/setIntroSection (it depends how you used it) function to Intro component as a prop, so then you will be able to access and use that state function. I hope this helps.
Use setIntroSection, not setIntro.
A whole bunch of code will be helpful to answer.
Related
Suppose I have a web structure as follows:
<Header />
<Component1 />
<Component2 />
<Component3 />
<Component4 />
Every component has a state as [component1Active, setComponent1Active] = useState(false)
Now, at the start Component1 is in view.
What I want is when component2 is scrolled in view, then I want to setComponent2Active = true and component1 as false.
I tried using useEffect, but it does not work as the states of all components are set as true during loading.
I am using functional components
Please help, any suggestions will be much appreciated.
Thanks in advance
There is a react library on NPM called 'react-in-viewport'
https://github.com/roderickhsiao/react-in-viewport
Here is an example.
import handleViewport from 'react-in-viewport';
const Block = ({ inViewport, forwardedRef } ) => {
const color = inViewport ? '#217ac0' : '#ff9800';
const text = inViewport ? 'In viewport' : 'Not in viewport';
return (
<div className="viewport-block" ref={forwardedRef}>
<h3>{ text }</h3>
<div style={{ width: '400px', height: '300px', background: color }} />
</div>
);
};
const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);
const App= () => (
<div>
<div style={{ height: '100vh' }}>
<h2>Scroll down to make component in viewport</h2>
</div>
<ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
</div>
)
Using const newComponent = handleViewport(<YourComponent/>) you can create any component into one that has the {inViewport, forwardedRef} props, on the containing element of your component set the ref attribute equal to forwardRef then you can use the inViewport prop to determine if it is in view. You can also use the onEnterViewport and onLeaveViewport attributes of the component created by handleViewport() to know the visibility of the component.
You can add the library to your project through either of the cli commands
npm install --save react-in-viewport
yarn add react-in-viewport
You could also do this yourself by accessing the document DOM with a listener on the scroll event and checking scrollHeight of the page and comparing it to the scrollHeights of each component. Using the library makes the implementation much less of a headache.
Using React, Next.JS and React-Bootstrap
So, i'm trying to just create a dismissable alert, like in the React-Bootstrap documentation, however, it would not close for me. Upon further inspection (that's what the console.logs arefor), i noticed that my Alert component is lauching "onClose" immediately upon being opened. That's a problem. Further more, i've also noticed that no matter what i pass as "onClosing", it reads in the console as "undefined", rather than outputting the function i sent it. This is made further weird, by the fact that just two lines down, im sending the same function, with opposite state to another component (where i signal the website to open the alert), and it's working completely fine. I've been at this for a couple hours now, and i'm pretty stuck. Any help would be appreciated!
My state variable at init
const [showAlert, setShowAlert] = useState(false)
Here's my Alert component
import {Alert, Button, ButtonGroup, ButtonToolbar, Collapse} from 'react-bootstrap'
import PropTypes from 'prop-types'
const MyAlert = ({onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}) => {
console.log(onClosing)
return (
<Alert variant={alertVariant} onClose={()=> onClosing} dismissible style={{margin:'1rem'}}>
<Alert.Heading>{alertHeading}</Alert.Heading>
<p>{alertText}</p>
<ButtonToolbar>
<ButtonGroup style={{margin:'.5rem .5rem .5rem 0'}}>
<Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>
</ButtonGroup>
<ButtonGroup style={{margin:'.5rem'}}>
<Button variant={alertVariant} onClick={() => onClosing}>Close</Button>
</ButtonGroup>
</ButtonToolbar>
</Alert>
)
}
MyAlert.defaultProps = {
buttonText: 'OK'
}
/* MyAlert.propTypes = {
onClosing: PropTypes.func
} */
export default MyAlert
And here's my Implementation of it
{showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}
The other component implementation i'm sending that setShowAlert to
<ParameterList onRandomList={() => randomListOfInstruments()} onNewList={ () => addNewInstruments()} onClear={() => setShowAlert(true)}></ParameterList>
Your usage of MyAlert component is probably the issue here:
{showAlert ? <MyAlert onClosing={() => setShowAlert(false), console.log("closing")} alertVariant="danger" alertHeading="Test Alert" alertText="This is just a test alert."/> : ''}
You are passing a value to the onClosing, alertHeading, alertText, alertVariant props of MyAlert, while the actual props of MyAlert are:
{onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText}
Among those, you also have methodToExecute, which you are using as a condition when loading your alert:
<Button variant={alertVariant} onClick={()=> {methodToExecute!=undefined ? methodToExecute : onClosing}}>{buttonText}</Button>
Basically, since your methodToExecute is always undefined, this button will always activate onClosing when clicked.
The solution is to add all the necessary props when using MyAlert, or at least include methodToExecute function in the props you pass to it, so your button will bind that to the onClick function instead.
As for onClosing which you are passing as a prop to MyAlert, you also need to fix that, because you are calling two functions separated by comma ',' on its implementation:
onClosing={() => setShowAlert(false), console.log("closing")}
The proper implementation would be:
onClosing={() => {
setShowAlert(false);
console.log("closing");
}}
I am trying to call PopupDialog.tsx inside Content.tsx as a sibling of Item.tsx.
Previously PopupDialog.tsx is called inside C.tsx file but due to z index issue i am trying to bring it out and call it in Content.tsx
Is it possible to somehow pass the whole component(popupDialog and its parameters) in Content.tsx so that i could avoid passing back and forth the parameters needed for popupdialog in content.tsx.
Code in C.tsx where PopupDialog component is called.
const C = (props: Props) => (
<>
{props.additionalInfo ? (
<div className="infoButton">
<PopupDialog // need to take this code out and want to add in Content.tsx
icon="info"
callback={props.callback}
position={Position.Right}
>
<div className="popuplist">{props.additionalInfo}</div>
</PopupDialog>
</div>
) : (
<Button className="iconbutton"/>
)}
</>
);
Content.tsx where i would like to call PopupDialog.tsx with its parameters
const Content = (props: Props) => {
const [componentToRender, docomponentToRender] = React.useState(null);
const [isAnimDone, doAnim] = React.useState(false);
return (
<div className="ContentItems">
<PWheel agent={props.agent} />
{isAnimDone && (
<>
<Item {props.agent} />
{componentToRender &&
<PopupDialog/> //want to call here with all its parameters to be passed
}
</>
)}
</div>
);
};
Folder Structure
App.tsx
->ViewPort.tsx
->Content.tsx
->PWheel.tsx
->Item.tsx
->A.tsx
->B.tsx
->C.tsx
{props.additionalinfo &&
->PopupDialog.tsx
->PopupDialog.tsx
So if I understand the question correctly you want to pass one component into another so that you can use the properties or data of the passed componenet in your current component.
So there are three ways to achieve this.
1)Sending the data or entire component as prop.This brings disadvantage that even though components which don't require knowledge
about the passed component will also have to ask as a prop.So this is bascially prop drilling.
2)The other is you can use context api.So context api is a way to maintain global state variale.so if you follow this approach you don't need to pass data or componenet as props.Wherever you need the data you can inport context object and use it in componenet.
3)Using Redux library.This is similar to context api but only disadavantage is that we will have to write lot of code to implement this.Redux is a javascript library.
Let me know if you need more info.
You need to :
<>
<Item {props.agent} />
{componentToRender &&
<PopupDialog abc={componentToRender} /> //you must call in this component, in this case i name it is abc , i pass componentToRender state to it
}
</>
and then PopupDialog will receive componentToRender as abc, in PopupDialog , you just need to call props.abc and done .
If you need to know more about prop and component you can see it here
I think what you want to use is Higher-Order-Components (HOC).
The basic usage is:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
Below is such an implementation that takes a component (with all its props) as a parameter:
import React, { Component } from "react";
const Content = WrappedComponent => {
return class Content extends Component {
render() {
return (
<>
{/* Your Content component comes here */}
<WrappedComponent {...this.props} />
</>
);
}
};
};
export default Content;
Here is the link for higher-order-components on React docs: https://reactjs.org/docs/higher-order-components.html
Make use of
useContext()
Follow this for details:
React Use Context Hook
Hi I have some sort of the following code:
class First extends Component {
constructor(props){super(props)}
myfunction = () => { this.card //do stuff}
render() {
return(
<Component ref={ref => (this.card = ref)} />
)}
}
Why is it not possible for me to access the card in myfunction. Its telling me that it is undefined. I tried it with setting a this.card = React.createRef(); in the constructor but that didn't work either.
You are almost there, it is very likely that your child Component is not using a forwardRef, hence the error (from the React docs). ref (in a similar manner to key) is not directly accesible by default:
const MyComponent = React.forwardRef((props, ref) => (
<button ref={ref}>
{props.children}
</button>
));
// ☝️ now you can do <MyComponent ref={this.card} />
ref is, in the end, a DOMNode and should be treated as such, it can only reference an HTML node that will be rendered. You will see it as innerRef in some older libraries, which also works without the need for forwardRef in case it confuses you:
const MyComponent = ({ innerRef, children }) => (
<button ref={innerRef}>
{children}
</button>
));
// ☝️ now you can do <MyComponent innerRef={this.card} />
Lastly, if it's a component created by you, you will need to make sure you are passing the ref through forwardRef (or the innerRef) equivalent. If you are using a third-party component, you can test if it uses either ref or innerRef. If it doesn't, wrapping it around a div, although not ideal, may suffice (but it will not always work):
render() {
return (
<div ref={this.card}>
<MyComponent />
</div>
);
}
Now, a bit of explanation on refs and the lifecycle methods, which may help you understand the context better.
Render does not guarantee that refs have been set:
This is kind of a chicken-and-egg problem: you want the component to do something with the ref that points to a node, but React hasn't created the node itself. So what can we do?
There are two options:
1) If you need to pass the ref to render something else, check first if it's valid:
render() {
return (
<>
<MyComponent ref={this.card} />
{ this.card.current && <OtherComponent target={this.card.current} />
</>
);
}
2) If you are looking to do some sort of side-effect, componentDidMount will guarantee that the ref is set:
componentDidMount() {
if (this.card.current) {
console.log(this.card.current.classList);
}
}
Hope this makes it more clear!
Try this <Component ref={this.card} />
Is it safe to use React.forwardRef method directly inside render function of another component -
Example -
function Link() {
// --- SOME EXTENSIVE LOGIC AND PROPS CREATING GOES HERE ---
// --- OMITTED FOR SIMPLICITY ---
// TO DO: Remove forward ref as soon Next.js bug will be fixed -
// https://github.com/zeit/next.js/issues/7915
// Please note that Next.js Link component uses ref only to prefetch link
// based on its availability in view via IntersectionObserver API -
// https://github.com/zeit/next.js/blob/canary/packages/next/client/link.tsx#L119
const TempShallow = React.forwardRef(props =>
cloneElement(child, {
...props,
...baseProps,
onClick: handleClick
})
);
return (
<NextLink href={href} as={as} prefetch={prefetch} passHref {...otherProps}>
<TempShallow />
</NextLink>
);
}
As you see it's a temporary workaround for a bug in Next.js v9 - https://github.com/zeit/next.js/issues/7915.
Beware forwardRef affects reconciliation: element is always re-created on parent re-rendering.
Say
function App() {
const [,setState] = useState(null);
const Input = React.forwardRef((props, ref) => <input {...props} />)
return (
<div className="App">
<h1>Input something into inputs and then click button causing re-rendering</h1>
<Input placeholder="forwardRef" />
<input placeholder="native" />
<button onClick={setState}>change state to re-render</button>
</div>
);
}
You may see that after clicking button forwardRef-ed input is dropped and re-created so it's value becomes empty.
Not sure if this could be important for <Link> but in general it means things you'd expect to run only once per life time(say fetching data in componentDidMount or useEffect(...,[]) as alternative) will happen much more frequently.
So if choosing between this side effect and mocking warning I'd rather ignore Warning. Or create own <Link > that will not cause warnings.
[UPD] missed one thing: React checks forwardRef by reference in this case. So if you make forwardRef out of the render(so it's referentially the same) it will not be recreated:
const Input = React.forwardRef((props, ref) => <input {...props} />)
function App() {
const [,setState] = useState(null);
return (
<div className="App">
<h1>Input something into inputs and then click button causing re-rendering</h1>
<Input placeholder="forwardRef" />
<input placeholder="native" />
<button onClick={setState}>change state to re-render</button>
</div>
);
}
But still I believe it's safer to ignore warning than to introduce such a workaround.
Code above has worse readability to me and is confusing("why ref is not processed at all? was it intentional? why this forwardRef is here and not in component's file?")
I concurr with skyboyer, I'll add that it might be possible to create the forwardRef component outside of the render function to avoid re-creating the component each render. To be checked.
const TempShallow = React.forwardRef(({ child, ...props }) => React.cloneElement(child, props))
function Link() {
// --- SOME EXTENSIVE LOGIC AND PROPS CREATING GOES HERE ---
// --- OMITTED FOR SIMPLICITY ---
// TO DO: Remove forward ref as soon Next.js bug will be fixed -
// https://github.com/zeit/next.js/issues/7915
// Please note that Next.js Link component uses ref only to prefetch link
// based on its availability in view via IntersectionObserver API -
// https://github.com/zeit/next.js/blob/canary/packages/next/client/link.tsx#L119
return (
<NextLink href={href} as={as} prefetch={prefetch} passHref {...otherProps}>
<TempShallow {...props} {...baseprops} child={child} onClick={onClick} />
</NextLink>
)
}