score:-1
whenever you need access to a component that is imported from a third-party library, just render the component in the browser and then inspect the elements in that component with dev tools. then use css selectors to access those elements, and change their content or style as you wish. let's say you put the component in a div with the id of container1 and in the component, you will find 2 divs. inside the inner div is where you would like to put your content. this would be the code:
const mycontent = "this is the content to be put in the component"
document.getelementbyid("container1").queryselector("div").queryselector("div").innerhtml = mycontent
score:0
you cant give a component props as the component itself wont do anything with them.
the simplest solution that might work but probably wont is to wrap the component in another component and then put both your injected child and the component itself in as siblings although im guessing this wont work
<div>
<yourheader />
<somecomponent />
</div>
next option is if the component itself is open source you can make a pull request and/or a fork.
last option is to rewrite the component locally.
either way though if you want the component to use the props you send it you will need to edit the component itself and react component can't be extended in that way.
score:1
as i understand, what you want is a higher order component (hoc). a hoc is a function that takes a component and returns a new component. you can create/manipulate/fetch data inside a hoc and the data can be sent down to the received component.
const wrapper = component => ({ ...props }) => (
const data = axios.get()
// manipulate data
// add redux store
// ...
<component {...props} data={data}/>
);
and you can use it like this:
const wrappedcomponent = wrapper(component);
you can read more about hocs in the official react documentation
Source: stackoverflow.com
Related Query
- How can I render children inside a component that does not render children?
- Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method
- How to create a button component inside of a react-router Link that does not redirect?
- ReactJs: How can I simplify this component so that I do not have to render my Modal and window component twice?
- how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
- How to use React.useContext in a function that does not render any components?
- How can I wrap the Children of a Parent component in a HOC and render them in React?
- Test that a component does not render when passed a certain prop value with enzyme
- React complains that hook is not used inside of a body function when my component is passed into another component to render
- How can I conditionally render this component based on whether or not there is data in localstorage?
- In React, when will the componentDidMount fire for a component that does not directly render markup?
- How to "wrap" <Route> component so that it can be used inside <Router> in React?
- React: same component reappearing multiple times in the app, how can I make sure that all states are captured accurately and not just the last?
- How can I do in React so that once a product is added to the cart if that product has already been added before it does not repeat a new object?
- How can i connect redux with localStorage so that when updating the like on the page does not disappear
- How to change zIndex in react-select drowpdown in a way that the react-calendar component does not overlap? previous questions did not work
- How does React call the render function of an ES6 class in a such a way that `this` does not refer to the class itself?
- How do I convert this function into a class component so that I can use render to call the return?
- How can I render component that gets rendered when clicking a button to the top of the list instead of the bottom?
- how can i loop through the array inside of an object. and render it in the react component
- How to apply class to an external component that does not support className?
- How can I call a function that set sets an outside variable inside a custom component in React Native?
- component does not render inside map
- How should I use external component module that does not include @type in React?
- Route does not render component on 2nd level of children
- How can I ensure that React creates a new instance of a component, even if the component tree has not changed?
- How to create React component that can render Img or Video depending on API data it recieves
- How can I do so that once a certain product is added to the cart, if that product has already been added before, it does not repeat a new object?
- React: How to render component children inside array?
- React global variable not being updated inside function that passing to children component
More Query from same tag
- React output does not preserve line breaks
- Loading spinner while fetching an api in react app not showing
- importing env variable react front end
- How to get url parameters in reactjs
- core-js is large in bundle (using 62kB)
- <App/> component is not rendering in React.js
- Modifying an array in the state doesn't render to the page
- Http get request using axios in react.js
- React.js - Controlled input toLocaleString()
- Import TypeScript modules from local module into React app
- List items with inputs - how to add list object to an array when input has value?
- How can i pass data in reactstrap modal when specific button id is click?
- Custom style of React-tabs
- Hot reload is not working with clean react project?
- How to get VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY for django webpush implementation?
- React js Execute function on submit
- (Refactor/Improve) Loop to make API calls and manupilate Array following the "no-loop-func"
- How to get the API provided record values within <Edit>?
- react tutorial: state not working
- How to avoid prop drilling ? / How to use useContext?
- redux saga selectors, how do I access state from a saga?
- Index.html doesn't load css nor script on nested url
- What to keep as presentational and container in Reactjs?
- How to selectively manage the props of child components from within a parent component?
- Get form data in ReactJS
- Resolving ESLint / React / Redux (Airbnb config) errors that don't seem to make sense
- Does it anti-pattern to change state parameter in render?
- How to create an excel file in react js with custom headings and styles while doing export to excel?
- Makefile command to run react test suite in child folder
- Dynamic implementation of Semantic-Ui "Flag" element in my language dropdown