I m trying to populate an Array Form using the component FieldArray of reduxForm
<FieldArray name="testArray"
component={renderArray}
/>
where
let testArray = [{}];
export const renderArray= ({fields}) => (
<ul>
{window.alert("Array - size ="+_.size(fields))}
{_.size(fields) === 1 ? fields.push({}) : null}
{window.alert("Array - size ="+_.size(fields))}
{fields.map((otherFiscalResidencyCountry, index) => (
<li key={index}>test</li>
))}
</ul>)
I was waiting that the fields size be 2 after doing the fields.push({}). but I ve got size = 1 ...
Here is a debugging screenshot :
Any idea ?
I resolved this issue using the push on array instead of the push action creator of redux-form
so here is the solution :
testArray = testArray || []; // this initialize my array
fields.getAll().push({})
instead of
fields.push({})
Related
I'm using Svelte for the first time, and I'm trying to figure out how to apply filtering to a list retrieved from an API. My EventsIndex component is very simple, and comprises the following logic:
import FetchPosts from '../services/postsByType'
import EventCard from '../components/EventCard.svelte'
export let post_type
let events = new FetchPosts( post_type ).get()
let currentCategory = 0
function updateCategory( catId ) {
currentCategory = catId
}
Everything works just as expected.
I'm also using the await template syntax to display the relevant data:
{#await events}
<h1>loading...</h1>
{:then events}
<section class="grid">
{#each events as event}
<EventCard event={event} on:filter={updateCategory}/>
{/each}
</section>
{:catch error}
<p>Something went wrong...</p>
{/await}
The missing piece is the reactive filtered list. I thought I could do the following, but it generates the error events.map is not a function, which makes sense, as the events variable would be an unresolved promise when filteredEvents is invoked.
$: filteredEvents = () => {
if (currentCategory === 0) return events
return events.filter( event => {
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
})
}
So how would I add a reactive filteredEvents function, that I can also include in my template?
Filtering on the events inside the {#each} loop should work. If the filter function was very short like this I'd apply it inline
{#each events.filter(e => e.id === currentId) as event}
Just as an example. Since in your case the filter function is more complex, moving it to a function might be the better option
filterEvents(events, currentCategory) {
if (currentCategory === 0) return events
return events.filter( event => {
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
})
}
</script>
...
{#each filterEvents(events, currentCategory) as event}
(I think you can replace this
return event.categories !== null
? event.categories.some( cat => cat.id == currentCategory )
: false
by this
event.categories?.some( cat => cat.id === currentCategory )
Flunetui TextField has a prop for onRenderSuffix where I can render a Spinner component to indicate that a save call is being made. However, comboBox doesn't have something like that from looking at the IComboBoxProps interface. Any idea how I can implement the following like I am doing with textBox?
onRenderSuffix: () => {
return (
<>
{isSubmitting && (
<TooltipHost
id="goal-saving-id"
content="some content"
>
<Spinner aria-describedby="goal-saving-id" />
</TooltipHost>
)}
</>
);
}`
I have the following Component in my NextJs app
const Input = React.forwardRef((props, ref) => <input {...props} />)
All I keep getting as error is
Component definition is missing display nameeslintreact/display-name
What is possibly the reason?
You are using anonymous arrow function to create the component. If you use a regular function you won't get that error.
const Input = React.forwardRef(function Input(props, ref) { return <input {...props} />})
Or you can just add displayName to Input const
Input.displayName = 'Input'
Background
I'm trying to build an app which shows a number of stores, in the home screen which is a function component (mind this as I need to use hooks) I have a scroll view which shows different stores.
What I need
When the user presses on one of the stores it should redirect it to a screen which has the information of that specific store. I have built the "store detail" screen but with static info, I want to replace all of that information with data stored in a firestore collection.
Question
How would one go about retrieving data from a Firestore collection in react native, then assigning the data from each document to a separate Touchable Opacity (I know about passing params with react navigation, I just don't know which param to pass when working with Firestore), and then displaying that data in the store detail screen?
Sample code for context
App.js
<NavigationContainer>
<Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}>
<Stack.Screen name="Home"options={{headerShown: false}}>
{props => <HomeScreen {...props} extraData={user} />}
</Stack.Screen>
<Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/>
<Stack.Screen name="Registration" component={RegistrationScreen} options={{headerShown: false}}/>
<Stack.Screen name="storeDetail" options={{title: ''}}>
{props => <storeDetail {...props} extraData={} />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
In this file you'll see that I've already called some data (Login and Register pass userData to the Home Screen), however in order to implement that method I depended on the response from the authentication method I was using. I imagine although, I will probably need to pass something as extraData, I understand what I should do, I just don't know how to fill the blank spaces.
Thanks a lot in advance!
First, install the Firebase SDK in your app, so you can make queries to your backend.
I don't know if your sample App.js represents the current state of progress on your app, but I'm going to assume that:
you already have your storeDetail screen built
you know the store's id before navigating to the screen (eg in the HomeScreen)
you pass the storeId as a navigation param when navigating to storeDetail
So in storeSetails screen, you can query Firestore when receiving storeId, and save the result to a state variable on success:
const StoreDetailsScreen = ({ route }) => { // route is passed as a prop by React Navigation
const { storeId } = route.params
const [store, setStore] = useState()
const [loading, setLoading] = useState(true) // show a loading spinner instead of store data until it's available
useEffect(() => {
const fetchQuery = async () => {
const storeData = await firestore()
.collection('stores')
.doc(storeId)
.get() // this queries the database
if (storeData) {
setStore(storeData) // save the data to store state
setLoading(false) // set loading to false
} else {
// something went wrong, show an error message or something
}
}
fetchQuery()
}, [storeId])
if (loading) {
return (
<ActivityIndicator/>
)
}
return (
// ... store details
)
}
Then you can use the data in store to render stuff in your screen
<Text>{store.name}</Text>
<Text>{store.email}</Text>
// ...
More info about how to use Firestore in RN: https://rnfirebase.io/firestore/usage
I'm trying to disable the toolbars for all core blocks to keep the editors from unnecessarily formatting the content. Is that even possible?
My current approach is:
wp.blocks.getBlockTypes().forEach((blockType) => {
// unregister all default styles (from the right sidebar)
let blockName = blockType.name;
if ( blockType.hasOwnProperty('styles')) {
blockType.styles.forEach( (style) => {
wp.blocks.unregisterBlockStyle( blockName, style.name );
});
}
});
Can I somehow access the toolbars in this loop? Do I understand it correctly that I have to override the edit and save methods of the core blocks, probably with a filter?
Thanks, Patrik
I have just solved the problem, but different than intended.
Basically, the solution for me was to deregister the required core blocks, make changes to the edit and save methods, and then re-register the blocks.
A great help was this blog article by Riad Benguella:
https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/
Here's an example based on a core / quote block:
const TextControl = wp.components.TextControl;
import './style.scss';
import './editor.scss';
wp.domReady( () => {
let unregisteredBlock = wp.blocks.unregisterBlockType('core/quote');
unregisteredBlock.title = 'Quotation';
unregisteredBlock.icon = 'format-quote';
unregisteredBlock.edit = ({ attributes, setAttributes} ) => {
const updateFirstValue = ( val ) => {
setAttributes({
value: val
});
};
const updateSecondValue = ( val ) => {
setAttributes({
citation: val
});
};
return (
<div>
<TextControl
label='Quote'
value={ attributes.value }
onChange={ updateFirstValue }
/>
<TextControl
label='Citation'
value={ attributes.citation }
onChange={ updateSecondValue }
/>
</div>
);
};
unregisteredBlock.save = ( { attributes, className } ) => {
return (
<blockquote className={className}>
<p>{attributes.value}</p>
<cite>{attributes.citation}</cite>
</blockquote>
)
};
wp.blocks.registerBlockType('core/quote', unregisteredBlock);
});
In principle, both the edit and save method are replaced here, only the block attributes are reused from the core blocks. Due to the fact that new elements are used to enter the content, the toolbars are not the problem anymore.
I hope this can help someone who has the same problem.
Cheers,
Patrik