THE PROBLEM
I usually have to deal with this kind of data (look familiar?):
const ids = 'H1oHAKVdZ' 'SJXIAKEdb' 'S1j8At4u-'const data = 'H1oHAKVdZ': name: 'Item 1' 'SJXIAKEdb': name: 'Item 2' 'S1j8At4u-': name: 'Item 3'
And the common mission is to render it as a list, clicking on an item will trigger an action, for example, highlight it.
I usually come up with this (look familiar?):
Component { thisonClick = thisonClick } { return <buttom onclick=thisonClick> thispropsname </buttom> } { thisprops } { } { return <div> ids </div>}
So ... where is the problem right? The problem is, let's say we need 10 of them, for example, we need to remove the item, we need to start editing it, ... 2000 years later you will repeat yourself in this way:
Component { thisonAction1 = thisonAction1 thisonAction2 = thisonAction2 thisonAction3 = thisonAction3 thisonAction4 = thisonAction4 thisonAction5 = thisonAction5 } { return <div> <span>thispropsname</span> <button onclick=thisonAction1 /> <button onclick=thisonAction2 /> <button onclick=thisonAction3 /> <button onclick=thisonAction4 /> <button onclick=thisonAction5 /> </div> } { thisprops } { thisprops } { thisprops } { thisprops } { thisprops }
THE SOLUTION
{ return <div> <span>propsname</span> <EventData event='onclick' data=propsid> <button onclick=propsonAction1 /> </EventData> <EventData event='onclick' data=propsid> <button onclick=propsonAction2 /> </EventData> <EventData event='onclick' data=propsid> <button onclick=propsonAction3 /> </EventData> <EventData event='onclick' data=propsid> <button onclick=propsonAction4 /> </EventData> <EventData event='onclick' data=propsid> <button onclick=propsonAction5 /> </EventData> </div>}
See the difference? It's declarative and cleaner. That's it.
INSTALLING
npm install --save react-event-data
USAGE
/* * onClick = (id, ev) => {} */ { return <EventData event='onclick' data=id> <button onclick=onClick>Click me</button> </EventData>} /* * TextInput from react-native * onChange = (name, value) => {} */ { return <EventData event='onChangeText' data=name> <TextInput value=value onChangeText=onChange /> </EventData>} /* * TouchableOpacity from react-native * onPress = (id, ev) => {} */ { return <EventData event='onPress' data=id> <TouchableOpacity onPress=onPress> <Text>Tap me</Text> </TouchableOpacity> </EventData>}