I got stuck on a problem where I want to give some properties to a customCompontent.
I have a react component scoutingList that prints a list of players who are scouted at the moment. It's also possible to remove a player from this list by clicking on a button.
I also have a griddle component where the table is filled with data from a api call, except for the scout column for this column I made a customComponent.
return (
<Griddle
columns={["scout", "name", "club", "position", "points", "rpoints", "avgpoints", "value"]}
results={this.state.data}
/>
)
This customComponent should render a button with the text "Scout" or "Scouted".
From my parent class I pass a state this.state.scoutedPlayers what I want to pass to my customComponent. I hava found that you can pass extra data through customComponentMetaData, but it doesn't accepts props.
Anyone knows how to pass a property through a customComponent directly ?
Related
I am using https://www.npmjs.com/package/opengraph-react
It says if the prop onlyFetch is supplied then no card will display, but instead the results from opengraph will be passed as props to the components children.
However, I do not know how to get hold of the data?
My code is
<OpengraphReactComponent
site={comment.url}
appId={"myapistring"}
size={'small'}
onlyFetch={'true'}
/>
The console shows data from their console.log but I can't work out a way to access the data returned?
I have tried console.log(this.props.children) within the component which is just empty
I have multiple places where I need to filtered out different data, I decided to create a search component that can receive dynamic values through props. The new array coming from the search component should be pass to a new component.
I create a dummy example like this one :
<SearchBar placeholder='Search project by company name' filterFunc={'pass the function that get the input value'}/>
<TableData data={'new array coming from search component'}/>
I try to use the useState hook to store the filtered data but I did not succeed.
Can you please help me with a possible solution ?
I need to plot a table using data from header component ( 2 drop-downs & one Apply button), while header, table section & footer are unrelated to each other
I have tried to create an array in separate Utils file, which is populated when Apply button is hit, it is passed as
<Table data={utils.sortArray}/>
While data is populating sortArray when Apply button is hit in header component, it is showing length 0 Still
When Apply button is hit, new array data should get passed to table component
If you need the table to update based on input in the header the components aren't really unrelated (they are related through the data they have in common / are sharing).
To communicate between the two you will need a way to pass the data - the logical approach is to have the parent component coordinate between the two as it is contextually aware of both. In this case, you can:
Pass callback a prop to your header component that you call with the required data
Store the data sent in the callback in the parent's state
Pass the state data to your Table.
E.g., in your parent component:
state = {
sortArray: '', // What ever your default value is
}
onSort = (sortArray) => {
this.setState({
sortArray,
});
}
render() {
...
<Header onSort={this.onSort} />
...
<Table sortArray={this.state.sortArray} />
...
}
And then call onSort in your header with the required value as needed.
I'm trying to render a list of components using map function in render. When I change state, render function is called as expected but my component is not updated.
I've made a sample codesandbox here
https://codesandbox.io/s/nk24mr55om
What am I doing wrong?
I've added some console logs and it look like secret content should be displayed but it is not
Once your item is pushed into the items array, it will not be updated, ever. A solution to this would be to convert the items you push into arrow functions that will get a show parameter :
items.push(show =>
<div>
{show && <div>I'm secret</div>}
My content
<br />
<input
type="button"
onClick={showSecret}
value="Show secret content"
/>
</div>
);
And then call it in the mapping of your render :
return <div key={index}>{item(show)}</div>;
However, with this solution, clicking on one button will cause every item to show their secret element, if this isn't the behavior you expect and want every item to act on its own, I suggest creating a hook for each item. And ahev them store their own show variable in their state.
I have no experience yet with react hooks, but i tried to understand whats going on.
The variable items you refer to is neither a prop nor in the state of your component, i would make the component stateful and initialize items in the state.
Maybe there is a better way with react hooks that someone else can give
How to integrate mui-datatable with admin-on-rest?
Need the following options in the list view :
move around ordering of columns
show/hide columns
change the number of rows for display
print preview of table
Mui-datatable has these features. According to admin-on-rest documentation, we can use custom Datagrid. Can anyone explain how to do it?
Say you are making a custom-datagrid component 'MyIterator'. This component has to just make use two props that will 'auto-magically' be available to the child of 'List' component. One prop is ids and another is data.
The ids prop is an array of id of currently displayable data-items. And the data is an object containing the data for all the items displayable.
Something like this should do the part of making a custom-datagrid -
const MyIterator = ({ids, data}) => ids.map(id=><div key={id}><span>Label</span><span>{data[id].label}</span></div>)
Above example presumed the data-item object to have a property of 'label'.
And this is how a custom-datagrid can be made.