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
Related
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 have a Component where in the componentDidMount method I fetch information from the backend and put it on the state of my component. However I have to change the response in order to use the objects coming from the backend on the Select Component from material UI.
I do it like this:
var toAdd = []
axios.get(...).then(response.data.forEach(p => toAdd.push({id: p.name, value: p.name}))})
...
this.setState({schemas: toAdd})
Then, on render method I send schemas from state to the form component. The form itself has a set of inputfields with the select component as well.
I have the following warning:
Material-UI: You have provided an out-of-range value undefined for the select (name="schema") component.
Consider providing a value that matches one of the available options or ''.
The available values are "".
I did console.log and the first value I get is an array [] but with objects inside. After I write something on the input fields, the array changes to [{...}] and then the Select can show the options I wanted. The first array [] is not empty, if I open it on console there is one object inside. The same goes for [{...}]. Is there something I am doing wrong?
why don't you use the component state in order to get the data at the time when you get it from the API like this.
state={toAdd:[]}
then while fetching data you just set your state like this
this.setState({toAdd:... response.data.map(v=> {return{id:v.name,value:v.value}})
I am a beginner with react so please excuse me if this question does not make sense.
I have a complex div element in the html document with an id, it looks like this:
aaavote: I am comingChange My voteDelete Me
and it was originally created from rendering a react element that was returned from a component, like this:
let content = visitors_list.map((visitor) =>
)
{content} was returned from the react component.
At some stage I need to replace that div (with id="MyDiv2") with a different content.
I have a function that creates this new "content" exactly the same way I created the original one, however, now instead of return it from the component and have react do the rendering, I need to do it manually and call:
document.getElementById("MyDiv2").innerHTML = something
I cannot just pass content as something because : component is an array of [object Object]
I cannot pass it as a json structure because JSON.stringify(content) gives me:
[{"type":"div","key":"1","ref":null,"props":{"className":"flex-no-shrink w-full md:w-1/4 md:px-3","children":{"key":null,"ref":null,"props":{"visitor":{"id":"1","name":"aaa","vote":0,"imageUrl":"http://www.stone-guitar-picks.com/stoneguitarpicksshop/images/large/GP2046_LRG.JPG"}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}]
so I tried: ReactDOM.render(content, document.getElementById("MyDiv2"))
but ReactDOM.render does nothing, infact it breaks and exists the function.
I also tried using React.createElement(content) - also did not work...
How can I solve this problem. the only solution that I found to work is forcing the refreshing of the page which I do not want to do.
Dont try to handle the dom manually, react does this for you!, imagine you have your component MyInput that renders an input with some characteristics that may be passed by properties as well, then you could just change your component props and react will change your component automatically. i'll try to post a hardcoded example:
const myComp = ({text, visible}) = return (
<input text={text} visibility={visible}>
)
then, when you change your component text it will render it automatically.
Help me pls with this issue:
I'am using mobx-state-tree + React + mobx + Socket.io ,i'm writing chat for project,and using for connection socket.io
From server i get chats list and then put him to mobx-state-tree store using action,then i want get data from mobx-state-tree store and use map function for render elements
But,i catch two errors
This is my mobx-state-tree model for chat
enter image description here
this is my code where i trying to maping data
enter image description here
this is issue
enter image description here
But error "user" undefined is very stranger,because when i use console.log() for display data,array has this data and displayed in console
Okay,i find problem with Reaction[observerobserved] this happens because component which render chat list was not wrapped into observer function
But i'm still have problem with undefined props of array when i call map method on him
Resolve for |Reaction[observerobserved]"
Need wrapped component into observer() function for subscribing on changes
For second problem, with undefined prop:
first solution wrong on the screen, because you try get undefined index in this case 'item.chat_users[index]", solution is use map for chat_users array to, and then render inner item for this data "item.chat_users.map(....)"
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 ?