I have this code in and example app and need to use it in a functional component:
ref={(c) => { this._carousel = c; }}
How can I assign the ref in an functional component?
You can use the React.useRef hook.
Example:
import React from "react";
function MyAwesomeFxnComponent() {
const ref = React.useRef(null);
return (
<Carousel ref={ref} />
);
}
With functional components you can use refs like this:
// Import react useRef hooks
import React, { useRef } from 'react';
export function CarouselWrapper {
// create your reference
const carouselRef = useRef(null);
return (
// Pass ref to your carousel component
<Carousel ref={carouselRef} />
)
};
Here you can read docs https://reactjs.org/docs/hooks-reference.html#useref
Related
I want to use a useEffect, useState and other hooks in a react website not built with node. How can i do these following below:
1.How can i use a functional component when adding React to a Website?
2. How can i use hooks in functional component when adding React to a Website?
I don't want to use class based component as referenced here https://reactjs.org/docs/add-react-to-a-website.html
An example of a functional component:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
and how it is called in another functional component:
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
For hooks, the most used hook that you will start with is useState hook.
You need to import it first:
import React, { useState } from 'react';
and use it inside you component to create and change the value of a variable.
const [count, setCount] = useState(0);
count is a variable that is called state. setCount is how you update that state, and 0 is the default assigned value.
I have two arrays that I want to map through:
const social = ["Snapchat", "TikTok", "Dribbble", "Discord", "Facebook"];
const socialIcons = [<SnapchatIcon />, <DribbbleIcon />];
The socialIcons array are all components
How can I send both values as props into my DummyRectangle component? Here is my current code:
{social.map((s, index) => (
<div className="dummy_buttonsWrapper">
<DummRectangle social={s} socialIcons={i} />
</div>
))}
And here is DummyRectangle component:
function DummRectangle({ social, socialIcons }) {
// console.log("---->", socialIcons);
return (
<div>
<p>{social}</p>
{<socialIcon/>} // render social icon component
</div>
);
}
To do so, you don't need to wrap tags around your socialIcon in your DummRectangle. Also, it doesn't seem that you are passing the socialIcon component at all. If I were you, I would do something like this:
The following two are the components as an example that you would like to render (in your case - socialIcons)
// Comp1.js
import React from "react";
const Comp1 = () => <div>actual Comp1</div>;
export default Comp1;
// Comp2.js
import React from "react";
const Comp2 = () => <div>actual Comp2</div>;
export default Comp2;
Now, in your main Parent component, you would simply get the current component of the componentName (in your case - social) by accessing your component's array with an index. Then, you would pass this currentComponent as props to your Child component where you want to render it.
// App.js
import React from "react";
import Comp1 from "./Comp1";
import Comp2 from "./Comp2";
import DummyComponent from "./DummyComponent";
export default function App() {
const componentNames = ["Comp1", "Comp2"];
const components = [<Comp1 />, <Comp2 />];
return (
<div className="App">
{componentNames.map((name, index) => {
const currentComponent = components[index];
return (
<div>
<DummyComponent componentName={name} component={currentComponent} />
</div>
);
})}
</div>
);
}
In your Child component, you can simply render it by enclosing it into the brackets - no need to add tags. React will do all the rendering for you. In your case it would be { socialIcon }
// DummyComponent.js
import React from "react";
const DummyComponent = ({ componentName, component }) => {
return (
<div>
<p>{componentName}</p>
{component}
</div>
);
};
export default DummyComponent;
Link to Codesandbox with the above code for reference: click here
I am trying to understand passing the functional component's props to the returned functional component
**CODE ------------------------------------------------
App Component:
import React from 'react';
import ClickCounter from './ClickCounter';
const App = () => {
return (
<div className="App">
<ClickCounter firstName="John" lastName="Doe"/>
</div>
);
}
export default App;
ClickCounter Component:
import React from 'react'
import withCounter from './withCounter'
const ClickCounter = (props) => {
const { count, incrementCount, name } = props
return (
<div className="click-counter">
<button onClick={incrementCount}>Click Button</button>
<h2>{name}</h2>
<h1>{count}</h1>
</div>
)
}
export default withCounter(ClickCounter, 10)
withCounter Component (HOC)
import React, { useState } from 'react'
const withCounter = (WrappedComponent, incrementNumber) => {
return props => { // ** A **
console.log('props ---- ', props)
const [count, setCount] = useState(0)
return (
<WrappedComponent. // ** B **
count={count}
incrementCount={() => setCount(count + incrementNumber)}
{...props}
/>
)
}
}
export default withCounter
From my understanding, the withCounter return a functional component (A) that use useState Hook and and it return another component (B) which access the state through closure.
** QUESTION -------------------------------------------
My question is why the props in A is firstName="John" lastName="Doe", is it a React thing or Javascript's thing.
Does React pass the parameter's props (i.e wrapped component's props) to the returned functional component? or it is a Javascript's thing?
i read it in another post saying it is related to curry, but i cannot see it is related to curry, below is the post i read
HoC with React Hooks
const useSample = WrappedComponent => props => { // curry
const sampleCtx = useContext(SampleCtx);
return (
<WrappedComponent
{...props}
value={sampleCtx.value}
setValue={sampleCtx.setValue}
/>
);
};
Thank you!!
My question is why the props in A is firstName="John" lastName="Doe", is it a React thing or Javascript's thing.
This is because that's the props you passed to your Counter. Attributes on a component are props passed to functional components. This is a React thing.
<ClickCounter firstName="John" lastName="Doe"/>
When you put the component ClickCounter in your tree, it's actually just withCounter(ClickCounter, 10) being called, since that's your default export.
withCounter is a function that returns another function (curry) that takes props and returns a component. This is the setup for a functional component.
React runs this function and passes the props firstName="John" lastName="Doe" to that function. Then, those props are added to your WrappedComponent via the spread operator {...props}.
I have to call a functional component from another functional component So how can I call child functional component from a functional component in react js.
import React from "react";
import TestFunctional from "./TestFucntional";
const TestListing = props => {
const { classes, theme } = props;
const handleClickTestOpen = () => {
return <TestFunctional />;
};
return (
<div>
<EditIcon
className={classes.icon}
onClick={handleClickTestOpen}
/>
</div>
);
};
export default TestListing;
I am trying to call or render TestFucntional component on EditIcon clicked but it is not called. So How can I call component?
Thanks.
You just use it in your jsx as a component as usual. You can see here
const ItemComponent = ({item}) => (
<li>{item.name}</li>)
const Component1 = ({list}) => (
<div>
MainComponent
<ul>
{list && list.map(item =><ItemComponent item={item} key={item.id}/>)}
</ul>
</div>)
const list = [{ id: 1, name: 'aaa'}, { id: 2, name: 'bbb'}]
ReactDOM.render(
<Component1 list={list}/>
, document.querySelector('.container')
);
From the above conversation, I guess you want conditional rendering, i.e. after any event you want to render the child component. To do so in the parent component, it should maintain a state. If you want to use functional parent component, you can use hooks. Or you can use some prop for the conditional rendering as well. Please provide a code snippet.
This is for reference: https://reactjs.org/docs/conditional-rendering.html
I have a component (EmailBuilder) which uses the react context api to render some things, I'd like to render that to html, I tried this:
import * as React from 'react'
import { EmailBuilder } from './EmailBuilder';
import ReactDOMServer from 'react-dom/server';
export const EmailBuilderPage = (props: any) => {
const element = <EmailBuilder />
return <>
{element}
<br />
<h1>HTML</h1>
{ReactDOMServer.renderToString(element)}
</>
}
While that rendered the root of the element it failed to render any of the changes to the element from the context api.
Is that at all possible to do?