I am using Griddle custom components and I have a component
var someComp = React.createCleass ...
then I set the custom component in griddle's config:
this.state.config.columns[1].customComponent = someComp;
Everything works fine: the only thing is if I want to pass a property in I don't see how? This fails:
this.state.config.columns[1].customComponent = <someComp prop1="me"/>;
So how do I pass properties to it? In my render I pass the config to Griddle so I never really use the jsx syntax ...
Related
Given the following code:
export const AdmButton = ({icon,title,iconSize}) =>{
return({icon} {title})
buttondata.map((el, index) => {
<AdmButton title={el.title} icon={el.icon} iconSize="3em"/>
})
export const buttondata=[{
title:'calc',
icon: <ImIcons.ImCalculator size="2em"/>,
},*/.../*
]
The AdmButton is by iteration created as many times as objects in buttondata. The object contains as icon the component from react-icons, in the example ImIcons.ImCalculator is being used. Now, this component has a property called size which I'd like to change depending the place the button is shown, but I don't find a way to refer to size (or another property) when the component is being called via object property. What's the right way to modify or overwrite a Property of a given component iterated this way?
Instead of being a hard-coded component, the icon property in your object can be a function which generates a component. And that function can accept an argument:
icon: (size) => <ImIcons.ImCalculator size={size} />
Then in your AdmButton component you can invoke that function with the parameter:
return({icon(iconSize)} {title})
So each iteration when mapping will pass the parameter along and instantiate the icon on the fly.
Side note: Your call to .map() is missing the return in the callback, and as such currently won't render anything. Either include a return or remove the curly braces to make use of an implicit return.
I am looking for a way to pass an array of components to a prop for a tabbing component. Just wondering if that's possible.
So I need to create a component that will shorten material ui's tabbing method but I cannot find a way to pass an array of components as a prop so that it will be rendered on that component.
Here is an example of my code:
<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>
And I map them on my code like this and I used lodash map method:
map(components, component=>{
<TabContainer>{component}</TabContainer>
}
But it returns this.
Warning: react-swipeable-view: one of the children provided is invalid: null.
We are expecting a valid React Element
And when I console.log the component it returns:
{$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}} Object Need help
I hope it can render the components.
Component's name must be started with a capital letter, but I can see here components = [<component1/>, <component2/>] they were not. So you must convert [<component1/>, <component2/>] to [<Component1/>, <Component2/>]. Second thing I see your map syntax is strange, it must be like this:
components.map(component => (<TabContainer>{component}</TabContainer>))
Reference: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
I solved This with another implementation.
I used 'react-swipeable-views' and instead passing a component I used this
<SwipeableViews
axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
index={this.state.value}
onChangeIndex={this.handleChangeIndex}
>
{ children }
</SwipeableViews>
And Changed:
<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>
To
<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
menuLabels = ['Menu1', 'Menu2'] //this is where title render
>
<Component1/>
<Component2/>
</FullWidthTab>
But if you can get how to pass components via props that would be great!
Cause you need return a value in map.
map(components, component=>{
return <TabContainer>{component}</TabContainer>
}
Your es6 syntax needs a subtle adjustment to return the react component.
map(components, component => <TabContainer>{component}</TabContainer> )
or, if you can use the map function from your array instead of importing from a library.
components.map( component => <TabContainer>{component}</TabContainer> )
I am trying to figure out how I need to use React.createRef() in react native with typescript as following code throws errors
// ...
circleRef = React.createRef();
componentDidMount() {
this.circleRef.current.setNativeProps({
someProperty: someValue
});
}
// ...
Currently following errors are thrown for this.circleRef.current.setNativeprops
[ts] Object is possibly 'null'. (property)
React.RefObject<{}>.current: {} | null
and
[ts] Property 'setNativeProps' does not exist on type '{}'. any
any ideas?
The first issue can be solved with a null check before proceeding with your logic since React.createRef() can also return null:
componentDidMount() {
if(this.circleRef !== null && this.circleRef.current !== null) {
this.circleRef.current.setNativeProps({
someProperty: someValue
});
}
}
The second is solved by passing the class name of the Node element for which you want to create a reference. For example, if your referenced element is a <Text>, then do:
circleRef = React.createRef<Text>();
This way, circleRef will be correctly typed and setNativeProps will exist if and only if the referenced component is directly backed by a native view:
The methods [of current] are available on most of the default components provided by React Native. Note, however, that they are not available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app. - Direct Manipulation - React Native documentation
You can add Typescript typings to a React Native Ref like this:
const textInputRef: React.RefObject<TextInput> = React.createRef();
I have a simple decorator and a react native component that is decorated like this:
#withData('apple')
class Screen extends Component {
}
I need to pass the parameter to #widhData dynamically. Based on the screen user has selected. But outside class I don't have access to props and so on.
How can pass dynamic parameters to the decorator based on the param passed on navigation ?
Thanks.
The project has the following reference, which returns a string:
const left = slide.imageLeft; // introLeft
And further renders it inside React Component. But it returns as a string styles.imageLeft and since webpack doest convert it into corresponding bundled class like 914u923asdsajdlj1l23 the styles are not applied.
<div className={`styles.${left}`}> </div>
P.S I did try to eval, but it drops 2 errors.
There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.
And
ReferenceError: styles is not defined
Can you please suggest the possible ways to achieve dynamic class generation for css-loader.
You have to define the style within the render(), or within the component definition, like this
render: function(){
var myStyle = {
// your style rules go here
};
return(
<div style={myStyle}>
{this.props.children}
</div>
)
}
in a way, this is already dynamic, because all you have to do is to change to style and it'll make sure that the component will re-render on update