would like to get the id of a row when I click on a button or somewhere on the row inside the list/Datagrid component of react-admin,
I am completely new to react js and react-admin as well.
WOuld appreciate for any kind gesture
React-admin exposes a hook called useRecordContext that lets you access the record used by the current component. In a Datagrid, this lets you access the record of the row.
So you can create a component like so:
import { useRecordContext } from 'react-admin';
const MyButton = () => {
const record = useRecordContext();
const handleClick = () => {
// the current row id is record.id
// do something with it
};
return <button onClick={handleClick}>Do stuff</button>;
}
Then, use that component as a child of <Datagrid>:
const MyList = () => (
<List>
<Datagrid>
<TextField source="title" />
<MyButton />
</Datagrid>
</List>
);
More information at https://marmelab.com/react-admin/useRecordContext.html
Related
<Controller
name={'productType'}
control={props.control}
render={({ field: { value, onChange, onBlur } }) => {
return (
<SelectInput
options={productTypeOption}
label={'Product Type'}
isDisabled={isDisabled.productTypeDisable}
onChange={onProductTypeChange}
isLoading={isLoading.productType}
statusMsg={productTypeOption.length}
/>
)}}>
</Controller>
I got my select input componenet from react-select package and i want to use react hook form controller with it btw i already got my own onChange props on it , In docs to send data to useForm i also need to put field onchange on it so how to bring onChange useForm with my own logic???
const onProductTypeChange = (e) => {
setServiceOtherOption([])
setServiceQuantitesOption([])
const valueSelect = e.value
props.setJobData((arr) => ({
...arr,
productType: valueSelect
}
))
}
this is my on change needed
You can set onChange prop on SelectInput as a function which calls your onProductTypeChange function and also call onChange of react-hook-form, like this:
<SelectInput
onChange={(e)=> {
onProductTypeChange(e);
onChange(e.value);
}}
...
/>
I use react-native.
And this is the function that I want to use.
The most important point here is editCommentMutation.
In order to execute this mutation, it requires two variables which are id and payload.
const onUpdateComment = React.useCallback((commentId) => {
setEdit(true);
console.log(commentId, comments);
editCommentMutation({
variables: {
id: parseInt(commentId),
payload: comments,
},
});
}, []);
I get these two variables correctly.
For id , I get it from component screen. So It comes thru argument.
For payload, I get it on the same screen.
Problem here is when I press button1, it sends commentId(id) data from component screen to this page.
And when I press button2, it sends comments(payload) data on this page.
On this App, I press button1 and write comments then button2 in order.
So Each data comes not together, but one by one.
So I execute console.log(commentId, comments),
press button1 : 386 undefined
press button2 : undefined Object { "comments": "뭐야", }
It has undefined for sure..
But in order to execute mutation, I need two data together.
For this, I need to save coming data in somewhere, I guess.
I also tried
const [data, setData] = useState("").
After I save coming commentId to here as:
setData(commentId).
But it isn't saved, just disappears. :)
Can you help me?
Here is a minimal verifiable example. Run the code below and
click ✏️ to edit one of the comments
click ✅ to save your edit and view the updated comment
function App() {
const [edit, setEdit] = React.useState(null)
const [comments, setComments] = React.useState([ "hello", "안녕하세요" ])
const onEdit = editable => event => { setEdit(editable) }
const onUpdate = newComment => event => {
/* execute your graphql mutation here */
setComments([
...comments.slice(0, edit.index),
newComment,
...comments.slice(edit.index + 1)
])
setEdit(null)
}
return <div>
{comments.map((comment, index) =>
<p>{comment}
<button
children="✏️"
onClick={onEdit({comment, index})}
disabled={Boolean(edit)}
/>
</p>
)}
{edit ? <EditComment text={edit.comment} onUpdate={onUpdate} /> : null}
</div>
}
function EditComment({ text, onUpdate }) {
const [value, setValue] = React.useState(text)
return <div>
<input value={value} onChange={e => setValue(e.target.value)} />
<button onClick={onUpdate(value)} children="✅" />
</div>
}
ReactDOM.render(<App/>, document.querySelector("#app"))
button[disabled] { opacity: 0.5; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
In your App you will execute your mutation in onUpdate. A cancel button ❌ can easily be defined using const onCancel = event => { setEdit(null) } and pass it to EditComment.
I want to find component from a list of components(or list of names of components) by name without loading components. Eg:
const arr = [
<ComponentA />,
<ComponentB />
]
const selectedComponent = arr.find(component => component.name === 'ComponentA');
and then render this selectedComponent in a div.
<div>{selectedComponent}</div>
**Note: ** Each component has unique name.
You could use a dynamic component instead it will load your select component name like this example
<component :is="component_name"></component>
and inside your data add the variable
data(){
return {
component_name: 'home'
}
}
For more info check the docs here
Below is a screenshot of the Redux dev tools. This is a list of records of a particular resource. As you can see, the newly added record has a duplicate with the key undefined. It also does not register on the list without a refresh.
Redux Dev Tools
Here is the create component:
export const OrgCreate = (props: ReactAdminComponentProps) => {
const controller = useCreateController(props);
return (
<Create {...props} {...controller}>
<SimpleForm>
<TextInput source="name" />
</SimpleForm>
</Create>
);
};
Here is the list component:
export const OrgList = (props: ReactAdminComponentProps) => {
const controller = useListController(props);
return (
<List {...props} {...controller} exporter={false} bulkActionButtons={false}>
<Datagrid rowClick="edit" hasBulkActions={false}>
<TextField source="name.value" label="Name" />
<DateField source="createdAt" />
</Datagrid>
</List>
);
};
Here is the create response in the GraphQL provider:
createResponse = (data: any) => data.createOrganization.organization;
Try removing the lines:
const controller = useCreateController(props);
const controller = useListController(props);
and further {...controller}, it should work.
I'm using the following code to create an action on a Edit View:
const PostEditActions = ({ basePath, data, resource }) => (
<CardActions>
<ReportUserAction record={data} />
</CardActions>
);
export const UserEdit = (props) => (
<Edit title="Modify user parameters" actions={<PostEditActions />} {...props}>
....
In ReportUserAction component I receive data= undefined, but I don't know why. The edit view has data:
{"data":{"locale":"en","status":"enabled","facebookId":"XXXXX","createdAt":"2016-06-15T20:21:47.000Z",...
And I can access to other variables such as basePath and Resource.
How can I pass data with the correct information?
Thanks