I want to use react-native-flexi-radio-button in my project to select one of the item in list form array and use this code
{this.state.Rooms.map(function (value,index) {
console.log(value.id)
return(
<RadioGroup onSelect ={(index, value) => this.onSelect(index, value)}>
<RadioButton value={value.id} isSelected={false} index={index}>
{/*<Text>{i.title}</Text>*/}
</RadioButton>
</RadioGroup>
)
})
}
but when i click on any button, it returns _this3.onselect is not function and its this function
onSelect=(index,value)=>{
console.log(index,value)
}
how to solve this?
Change this part of the code
{this.state.Rooms.map(function (value,index) {
to:
{this.state.Rooms.map((value,index) => {
Refer to this thread to know the difference between arrow functions vs the usual function declaration
Related
I am creating a block with InnerBlocks component.
If no content added to the InnerBlocks (and even with content in fact) it is very difficult to popup the block toolbar
I would like to add an iconbutton on top corner that will show the block floating toolbar
How can I tell the .block-editor-block-contextual-toolbar to show?
I don't see any method of the .wp-block in the inspector that would do that and the documentation of Block Controls: Block Toolbar and Settings Sidebar https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/ is quite basic
Many thanks
You can use useSelect() to determine if there are any blocks present in the InnerBlocks component:
import { useSelect } from '#wordpress/data';
const hasInnerBlocks = useSelect((select) => (
select('core/block-editor').getBlock(clientId).innerBlocks.length > 0
), [clientId]);
Then you can use hasInnerBlocks to conditionally render whatever you'd like within the edit function:
{ !!hasInnerBlocks && (
<BlockControls group="block">
<ToolbarGroup
// Toolbar group settings here
/>
</BlockControls>
) }
Try to use same code structure among the edit and save methods. The RIchText need to be waraped inside div.
<div>
<RichText.Content
className={ `sticky-note-${ props.attributes.alignment }` }
style={ {
fontSize: props.attributes.fontSize,backgroundColor: props.attributes.color,
} }
tagName="p"
value={ props.attributes.content }/>
</div>
Example
I created this example to illustrate your situation.
import { InnerBlocks, BlockControls } from '#wordpress/block-editor';
// ...
edit: () => {
const blockProps = {
// your own props
};
return (
<div { ...blockProps }>
<BlockControls>
// your controls
</BlockControls>
<InnerBlocks />
</div>
);
}
Problem
For the BlockControls to decide whether or not it should appear, it needs to get some context from its parent which your own props don't have.
Solution:
Use the block props instead for the parent of BlockControls.
Steps:
Import useBlockProps from #wordpress/block-editor:
import { InnerBlocks, BlockControls, useBlockProps } from '#wordpress/block-editor';
Pass your own props as an argument to useBlockProps():
const blockProps = useBlockProps({
// your own props
});
Result
import { InnerBlocks, BlockControls, useBlockProps } from '#wordpress/block-editor';
// ...
edit: () => {
const blockProps = useBlockProps({
// your own props
});
return (
<div { ...blockProps }>
<BlockControls>
// your controls
</BlockControls>
<InnerBlocks />
</div>
);
}
Links
I hope that helped.
My answer is based on Wordpress's official Block Editor Handbook:
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/#block-toolbar
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props
I think I am not understanding the documentation correctly.
The documentation says: that is takes a Function that return a position: Number, or a stepStatus: which takes a String to render custom content inside step
My goal is to render a check mark instead of a number as it is by default.
I tried to return a string of 'test' and it does not work.
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={() => {
this.renderStepIndicator();
}}
labels={labels}
/>
and this is the function that return a string
renderStepIndicator() {
return 'test';
}
I am not sure what I am missing here. also I want to return an icon of checkmark. I have seen people doin git but I am not sure how if this only takes a string or an integer.
Here this function returns two parameters step position and step status. You can use this function like this,
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={(stepPosition,stepStatus) => {
this.renderStepIndicator(stepPosition,stepStatus);
}}
labels={labels}
/>
And the render function is like,
renderStepIndicator(stepPosition, stepStatus) {
return <Icon name={"check"} size={20} color={stepStatus === 'finished' ? "green" : "gray"} /> ;
}
This function render check icon. If you step was complete it show green check otherwise gray check.
For more details you can check this example,
https://github.com/24ark/react-native-step-indicator/blob/master/example/src/HorizontalStepIndicator.tsx
The above solution does not work for me so tried some changes and after some time I got this working solution if some are still facing this issue try using this code.
1. Put this code in your StepIndicator props
renderStepIndicator={({ position, stepStatus }) =>
renderStepIndicatorRender(position, stepStatus)
}
2. Create a function to render the icon
const renderStepIndicatorRender = (stepPosition, stepStatus) => {
return stepStatus === "finished" ? (
<Icon name="check" size={12} color="#fff" />
) : (
<Text>{stepPosition}</Text>
);
Good Morning! I am wanting to create a selection box where the user has several options of items to choose from and when clicking on a button, it triggers a function that shows all the values that the user chose in the form of an array, json or even arrays ( hard task).
In the React Native documentation, only simple examples of checkboxes using the component are provided and I wanted to go much further than the documentation provides me. What are the possible solutions to this problem? (from a simpler example to an advanced one) and what (s) ways can I explore this problem in order to solve it in the most practical and uncomplicated way?
Definitions and examples of official documentation:
https://reactnative.dev/docs/checkbox/ (CheckBox)
https://reactnative.dev/docs/button/ (Button)
With this problem, another one came up: build an application where the user selects shopping options (items) and a subtotal is displayed in the lower corner of the application as he selects or deselects the items he is going to buy, and there is also an option to reset the subtotal by returning it to the zero value.
From the problem mentioned at the beginning, what are the possible solutions to create this application previously mentioned in a practical and simple way?
Multi Checkbox example ( Updated with Hook )
export const Example = () => {
const [checkboxes, setCheckboxes] = useState([{
id: 1,
title: 'one',
checked: false,
}, {
id: 2,
title: 'two',
checked: false,
}]);
const onButtonPress = () => {
const selectedCheckBoxes = checkboxes.find((cb) => cb.checked === true);
// selectedCheckBoxes will have checboxes which are selected
}
const toggleCheckbox = (id, index) => {
const checkboxData = [...checkboxes];
checkboxData[index].checked = !checkboxData[index].checked;
setCheckboxes(checkboxData);
}
render(){
const checBoxesView = checkboxes.map((cb, index) => {
return (
<View style={{flexDirection:"row"}}>
<Checkbox
key={cb.id}
checked={cb.checked}
onPress={() => toggleCheckbox(cb.id, index)} />
<Text>{cb.title}</Text>
</View>
);
});
return (
<View>
{ checBoxesView }
<Button onPress={onButtonPress} title="Click" />
</View>
);
}
}
Unable to Add ActionButton Items dynamically.
I have the following setup --
<ActionButton>
<ActionButton.item name={constant_btn1} />
<ActionButton.item name={constant_btn2} />
</ActionButton>
I want to add dynamic buttons to this list. (The list is received from backend)
I have created a function that returns me views of these buttons.
getDynamicBtns() {
return dynamicButtonsList.map(item, key) => {(
return <ActionButton.item name={item.btnName} />;
)};
}
and I have used it in this way -->
<ActionButton>
<ActionButton.item name={constant_btn1} />
<ActionButton.item name={constant_btn2} />
{this.getDynamicBtns()}
</ActionButton>
So this is rendering my constant buttons, but not the dynamic buttons.
EDIT -
I am returning the map from the getDynamicBtns() function and calling invoking the function call too from within render(). This is just some simplified sample code that I have wriiten.
EDIT2 -
To prevent any confusion, changing original question's code.
I figured it out.
The problem was that the .map function returns an array of Objects.
So the final element that was going to be rendered was a React element ActionButton.
The ActionButton had only 3 children, irrespective of the size of my dynamic list.
ActionButton.children: [
staticButton1,
staticButton2,
[dynamicButton1, dynamicButton2, dynamicButton3, ....]
];
As a solution, I took them into separate lists and found a union of the lists.
And then rendered the list inside <ActionButton>
Something like this ->
let listA = [<ActionButton.Item name='staticBtn1.name' />];
let listB = this.getDynamicBtns();
let finalList = _.union(listA, listB);
And then rendered it as -->
<ActionButton>
{finalList}
</ActionButton>
You are no returning anything in getDynamicBtns function. You should return the result of your map:
getDynamicBtns() {
return dynamicButtonsList.map(item => <ActionButton.item name={item.btnName} />)
}
A user object has an array prop schools that references one or more school objects. I would like to use a <List> with <CheckBox> to mutate the schools array.
I load the user object into the view, and I load the listOfSchools (from the application state) to generate the checkbox list:
<List data={listOfSchools} keyExtractor={ item=> item._id } renderItem={({item})=>renderItem(item)} />
The renderItem function:
const renderItem = (school) => {
return <ListItem
title={school.name}
accessory={()=>renderAccessory(school)}
/>
};
The renderAccessory function:
const renderAccessory = (school) => {
return <CheckBox checked={() => checkSchool(school._id)} onChange={()=>changeSchool(school._id)} />
}
The checkSchool function returns boolean on if the school._id is referenced in the user.schools array. The changeSchool function adds or removes the school._id from the users.schools array.
The changeSchool function:
const changeSchool = (schoolId) => {
let checked = checkSchool(schoolId);
if (!checked) {
// add schoolId to user.schools
} else {
// remove schoolId from user.schools
}
}
This drastically does not work. It appears that no matter what I use to mutate the state, the checkboxes never update, nor does the user.schools array mutate.
What is the proper way to structure such a design goal?
Assuming that you use UI Kitten, I can see that you got the checked prop value wrong for the CheckBox component.
UI Kitten CheckBox reference
The checked prop needs to be a boolean not a Callable as you have it there
I would try to change the code like this:
const renderAccessory = (school) => {
const isChecked = checkSchool(school._id);
return <CheckBox checked={isChecked} onChange={()=>changeSchool(school._id)} />
}
Let me know if that helped.
While trying various solutions i can conclude few things here:
With the solution given by #Cornel Raiu the checked and unchecked flags are getting correctly calculated however, the display was not correct with the state of checked/unchecked
I replaced Checkbox with Toggle, just to be sure that it works with iOS too
PROBLEM that i faced still is that, even the State of item getting toggled is correctly populating it was getting reset
The outside container of Toggles is List and ListItem,
OBSERVATION is that the Press event on List was actually getting the Checkbox/Toggle into correct Display State...
SOLUTION:
After longer time of research and experiments I got my thing working with following approach -
I maintained separate collection of Checked Items
There is already a state of Collection of master items, as input to List
Every time the Checkbox/Toggle is clicked, the master list of Data is cloned and copied back to its state
This was triggering the slight re-render of component and thing is working as expected.
const [cashTransactions, setCashTransactions] = useState([]); // master data
const [selectedTransactions, setSelectedTransactions] = useState([]); // selected data
const renderItem = ({ item, index }) => (
<ListItem
title={'('+item.id + ') ' + item.firstName + ' ' + item.lastName}
description={Moment(item.createdOn).format('yyyy-MM-DD hh:mm:ss')}
accessoryLeft={selectedTransactions.includes(item.id) ? RadioOnIcon : RadioOffIcon}
accessoryRight={() => checkBoxSpace(item)}
/>
);
const checkBoxSpace = (item) => {
let itemChecked = selectedTransactions.includes(item.id);
return (
<View style={styles.actionContainer}>
<Button size='tiny' status='basic' accessoryLeft={rupeeSymbol}>{item.amount}</Button>
<Toggle checked={itemChecked} status='primary' size='small' onChange={checked => checkboxChecked(item, checked)}></Toggle>
</View>
)
}
const checkboxChecked = (item, checked) => {
console.log('Item -' + item.id + ' ' + checked);
if (checked) {
if (!selectedTransactions.includes(item.id)) {
selectedTransactions.push(item.id);
}
} else {
if (selectedTransactions.includes(item.id)) {
selectedTransactions.pop(item.id);
}
}
console.log('selectedTransactions ' + JSON.stringify(selectedTransactions));
// This is the thing i applied to get it done.
const cloned = [...cashTransactions];
setCashTransactions(cloned);
}
// View
<List
style={styles.container}
data={cashTransactions}
renderItem={renderItem}
/>