score:3
react functions as child components
so if i'm getting this right, you are basically asking how you could get a component which is in the following format:
<mycomponent>
{(name) => (
<div>{name}</div>
)}
</mycomponent>
these are called functions as children. you do it by managing the state or a variable in a component locally and you pass that state or variable to any other component in the app by implementing the children as a function in mycomponent
.
so your mycomponent
component will look something as follows:
class mycomponent extends react.component {
render() {
return (
<div>
{this.props.children('scuba steve')}
</div>
);
}
}
mycomponent.proptypes = {
children: react.proptypes.func.isrequired,
};
this allows you to reuse mycomponent
anywhere with the exact same state or variables but you could render it differently.
you would find this pattern quite a lot in libraries like react-final-form
for example, where the library maintains a state and the users can "consume" that state and render it in anyway they want.
you can read more about it at this link and at this link as well.
score:0
<div>
{(value)=><span>{value}</span>}
</div>
this code is mean that you declared a function inside <div>
. (not calling that function any more)
<themecontext.consumer>
{(value) => <button style={{ background: value }}>hello context!</button>}
</themecontext.consumer>
this function will be called inside themecontext.consumer
then your element will render
score:0
i see that it as more of a javascript question than a react specific; react components at the end the day will become a function; javascript support function as first-class, so a function can be passed to other function as arguments ( or returned as value ) hence the higher the components and context api. so your question can be roughly translated to this code snippet:
function theme (color) {
/* some code maybe */
return function nav (totalitems){
return `i'll render a ${color} with ${totalitems} totalitems`;
}
}
let redthemed = theme( "dark red");
let navcomp = redthemed(17);
console.log( navcomp );
console.log( redthemed(12) );
let bluethemed = theme( "light blue");
console.log( bluethemed(4) );
score:1
understand react context internals
the react context consumer children is a function instead of typical string or react element
<themecontext.consumer>
{(value) => <button style={{ background: value }}>hello context!</button>}
</themecontext.consumer>
<div>
hey, i'm normal jsx
</div>
the above code will be transpiled to
react.createelement(themecontext.consumer, null, function (value) {
return react.createelement("button", {
style: {
background: value
}
}, "hello context!");
})
react.createelement("div", null, "hey, i'm normal jsx"))
you can see that the children (props.children
) is a function.
Source: stackoverflow.com
Related Query
- How does React Context work by using a function inside of a component
- Using arrow functions inside React component does not transfer over parent context (which exists). this remains undefined in arrow function
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to use React Context inside function of Class component
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- Using a function inside .map() in React , does not work properly
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- Button does not work using function component in react
- How to test a function call after state receive value inside expression in React function component using Jest
- How to use jest.spyOn with React function component using Typescript
- How to loop inside map function using jsx format React JS
- How does React know if a function component is a React component?
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- I got an error for using React.useRef inside a react function component
- How to attach a compound component when using React forward ref (property does not exist on forwardRefExoticComponent)
- how does the .render() function in react work internally?
- React router v4.2.2: using a string instead of function inside component prop of Route results in error
- React Test. how to test function inside react component
- Why does the render function in react is called twice when using the component strategy?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- React JS - How does this function work to delete JSON data?
- How to pass React Component prop to child function using {children}?
- How to render react component inside function in another component?
- Using enzyme, How to find a child component in a component react if they are result of function return
- how do i update state in react for updating the value of an object inside an array using array.map function
- How can I pass a function as a prop to a React component using react-router <Redirect />?
- React how to properly call a component function inside render()
- How does an anonymous function work in onClick in React component?
- How to reference and load Javascript file(s) inside a React Component using a React Hook
- How does this functional component using react hooks get its parameters?
More Query from same tag
- fabricjs gives error while importing with reactjs
- TypeError: evt.target is null in functional setState
- Dispatch action for onClick event
- NavLink activeClassName selected on page load
- Send props in .map() function
- React component render is called multiple times when pushing new URL
- When does React's useEffect get triggered during component lifecycle?
- How to run react project after installing dependencies from package.json
- React/Typescript error when adding promise to a function?
- Obtain a segment of Polyline which was clicked
- State use as props in component, state change will not re-render the component
- React router history not render correctly
- ReduxForm - Dynamic connect parameter
- convert from React component to using one hooks
- prevent infinite loop when calling setState in useCallback
- Accessing data of a JSON file in React
- Cant seem to parse json data in React, unsure of any conceptual errors i might
- How to set up Babel 6 stage 0 with React and Webpack
- React find all unselected elements of the array
- Listen to back button in mobile browser and e.preventDefault() then use our separate function in react function
- Apollo MockedProvider always returns undefined for data field, even after loading
- Using useEffect to trigger a re-render by updating state, but cannot have state in dependency array?
- Redux: trigger async data fetch on React view event
- how fix Element implicitly has an 'any' type because expression of type 'string' can't be used to index type?
- React useState broken? state is not updated correctly
- onSearch event on React Multiselect Dropdown?
- How to retrieve a React property from an event object
- Redux trigger action from the component
- useEffect Error: Minified React error #321 (GTM implementation instead of google analitycs)
- What is an in-memory API?