so I have declared my enums like so:
export const DOCUMENT_TYPE = {
Project: 'Project',
Document: 'Document'
}
And now I'm trying to access them in another document:
import DOCUMENT_TYPE from '../constants/enums'
const CreateDocumentScreen = props => {
const type = props.type == DOCUMENT_TYPE.Project ? "Project" : "Document";
return (
<View>
<Text>Create {type}</Text>
<TextInput/>
</View>
)
}
However, this line:
const type = props.type == DOCUMENT_TYPE.Project ? "Project" : "Document";
is throwing "TypeError: undefined is not an object"
My Guess:
import { DOCUMENT_TYPE } from '../constants/enums'
instead of
import DOCUMENT_TYPE from '../constants/enums'
Related
Now when these tags are in component file how does one map through various values.
Example
1. <Image source = require("")/>
2. const { sound } = await Audio.Sound.createAsync(require("../../assets/sounds/slack.mp3")
You can map like this:
const { sound } = await Audio.Sound.createAsync(require("../../assets/sounds/slack.mp3")
return sound.map((item, index) => (
<YourComponent key={index}>{item.value}</YourComponent>
))
what I do am wrong ?
reselect.js
import { createSelector } from 'reselect';
const createCollection = state => state.createCollection;
export const getCollectionName = createSelector(
createCollection,
(el) => el
);
if I only import the file, then I get this error:
Error: Selector creators expect all input-selectors to be functions, instead received the following types: [undefined]
Must be an import problem, you have no error in the code you provided:
const { createSelector } = Reselect;
const state = {};
const createCollection = state => state.createCollection;
const getCollectionName = createSelector(
createCollection,
(el) => el
);
console.log(getCollectionName(state))
console.log(
'also works:'
,getCollectionName(
{createCollection:'hello world'}
)
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
You should probably log what createCollection is before using it in createSelector.
You should prefix your selectors with select so your future self and other members of your team can recognise the selectors: selectCreateCollection and selectCollectionName
I have a case where I need to export two child components and use individually.
Much Desired outcome (Extremely simplified):
Controls.js:
const Controller = ( props ) => {
const ControlBoxes = () => {
return(<Button>Move around!</Button>)
}
const MoveableBox = () => {
return(<View>I will be moved! </View>)
}
return {ControlBoxes, MoveableBox}
}
export default Builder
Canvas.js:
import Controller from './controls'
const boxScaleMove = boxes.map((box, index) => {
return (
<Bulilder.MoveableBox key={box.id} box={box}/>
)
}
const boxController = boxes.map((box, index) => {
return (
<Bulilder.ControlBoxes key={box.id} box={box}/>
)
}
return (
...
{boxController}
...
...
{boxScaleMove}
...
)
Any idea how I can achieve this or am I missing something fundamental? The main issue is that I want to avoid resorting to useContext (due to performance reasons in the case of a lot of boxes rendered) and be able to share variables and states between MoveableBox-component and ControlBoxes-component via Controller -parent.
Any help would be greatly appreciated.
You could use the compound component and use a lower level context to avoid re-rendering of the whole tree and share states across your components that way, below I would ilustrate a basic example of how that would work.
const RandomContext = createContext();
export default function Controller({children, ...rest}) {
const [randomState, setRandom] = useState(0);
return (
<RandomContext.Provider value={{ randomState, setRandom }}>
<div {...rest}>{children}</div>
</RandomContext.Provider>
);
}
Controller.ControlBoxes = function (props) {
const { setRnadom } = useContext(RandomContext);
return (
<Button onClick={() => setRandom(2)} {...props}>Move around!</Button>
);
};
Controller.MoveableBox = function (props) {
const { randomState } = useContext(RandomContext);
return randomState ? <View {...props}>I will be moved!</View> : null;
};
And you would use it as:
<Controller>
<Controller.ControlBoxes />
<Controller.MoveableBox />
<Controller>
In the compound components pattern we are leveraging the fact that in javascript when you declare a function you create a function/object combo. Therefor Controller function is both a function and an object, so we can assign properties the the object part of that combo, properties which are in our case ControlBoxes and MoveableBox which are functions themselves.
NOTE you should probably assign named function the the properties of that object, it's easier to debug if the case needed.
Example.Function = function ExampleFunction(props) {
return "Example";
};
I want to test the onClick functionality of MenuPopover.Item id={3} if it was called once or not after clicking on it.
import React from 'react';
import copy from 'copy-to-clipboard';
const TableMenu = ({show, target, onClick, onHide, addedType, disable, readonly, rowId, supportRestore, supportDelete, isRestored}) => (
<MenuPopover
onClick={onClick}
onHide={onHide}>
{!readonly && (addedType ?
<MenuPopover.Item id={1} label='Delete' disabled=true/> :
<MenuPopover.Item id={2} label='Restore' disabled=false/>
)}
<MenuPopover.Item id={3} onClick={() => copy(rowId)} label='Copy'/>
</MenuPopover>
);
Test case written so far
const onCopySpy = sinon.spy();
const props = {
///
onCopy: onCopySpy,
///
};
it('check method onCopy called', () => {
const wrapper = shallow(<TableMenu {...props}/>);
expect(wrapper.find('MenuPopover').children()).to.have.lengthOf(2);
wrapper.find(MenuPopover.Item).... //Test case to call the onClick function
expect(onCopySpy.calledOnce).to.eql(true);
});
copy needs to be mocked in tests:
import copy from 'copy-to-clipboard';
jest.mock('copy-to-clipboard', () => sinon.spy());
...
const wrapper = shallow(<TableMenu {...props}/>);
wrapper.find(MenuPopover.Item).props().onClick();
expect(copy.calledOnce).to.eql(true);
This can be alternatively done with simulate but it does the same thing internally.
I am trying to set I18n.t to a variable then call this variable inside my class. But I am getting TypeError: undefined is not an object.
import I18n from 'react-native-i18n';
let tt = I18n.t;
class App extends Component {
render(){
return (
<View>
<Text>{tt('greeting')}</Text>
</View>
)
}
}
This will be useful check it out:
var tt = (translation) => I18n.t(translation);
<Text>{tt('greeting')}</Text>