score:1
Accepted answer
you can iterate the children using react.children.map
, clone them with cloneelement()
, check if the type
is span
, and if so change it to div
:
const { render } = reactdom;
const spanstodivs = ({ children }) => {
const newchildren = (array.isarray(children) ? children : [children]).map((child) => {
const newchild = react.cloneelement(child);
newchild.type === 'span' && (newchild.type = 'div');
return newchild;
});
return (
<div>
{newchildren}
</div>
);
};
const component1 = children => <span>{children}</span>
render(
<spanstodivs>
<span>cats</span>
<p>lions</p>
<span>dogs</span>
<component1>rabbits</component1>
</spanstodivs>,
document.getelementbyid('app')
);
span {
color: blue;
}
div {
color: red;
}
p {
color: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<div id="app"></div>
score:0
const component1 = props => <span>{props.children}</span>
const spanstodivs = props => <div>{props.children.props.children}</div>
const jsx = (
<section>
<spanstodivs>
<span>foo</span>
</spanstodivs>
<spanstodivs>
<component1>foo</component1>
</spanstodivs>
</section>
)
reactdom.render(jsx, document.getelementbyid('root'))
section > div:before {
content: '<div>';
}
section > div:after {
content: '</div>';
}
section > div:before,
section > div:after {
font-style: consolas;
font-size: 13px;
color: #7d2727;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Is it possible to change the rendered output of a component by wrapping it in another component?
- How to get the HTML output from a rendered component
- How to animate a conditionally rendered part of the component on state change using javascript and css?
- Is it possible to change the typography style of a material-ui TextField component to use a caption variant?
- Reactjs Send rendered output to wrapping Component
- How to test if a component is rendered with the right props when using react-testing-library?
- How do I trigger the change event on a react-select component with react-testing-library?
- how to rerender a component when hash change and change the state
- Reactjs how to change the state of a component from a different component
- Rendered more hooks than during the previous render when adding a hook component
- Component not updating when I change the props that I pass to it in React
- color change for the loading bar component of material ui
- Change the children of a component dynamically in React
- Change the state when clicking outside a component in React
- Is it possible to access the current route component with React Router
- React.js: How do you change the position of a Component item
- React Router v4 everything in the Router component re-renders on every route change
- React : How to stop re-rendering component or making an API calls on router change for the same route
- Is it possible to keep the current component mounted as the "fallback" content for React.Suspense after the initial page load?
- ReactJs - is it possible to set the url or querystring based on state of component tree
- React: on hover over component 1, change the style of another component
- How to change the text color and background color of ant-tooltip component
- How to change the borderColor of Paper component from material-ui react?
- How do I pass in the variant property of the material-ui TextField from a wrapping React component
- Is it possible to use spread out operator to set the react component props?
- react router changes the URL, but the component is not rendered
- Don't refresh the input values on component change
- Override of Button component doesn't change the hover color
- Change the language of the Fullcalendar React component
- Is it possible to change the timezone of moment object?
More Query from same tag
- Can I mix a type and a value in PropTypes oneOf?
- Action not being fired - react-redux counter example
- How do I get the page count from a PDF file with react-pdf?
- React Native - Disable "Screen Size" Setting
- data is not visible with mobx
- Is there a way to refresh the browser page every 15 mins if it has been idle for 15 mins using reactjs
- React won`t render array map function
- React: Action vs modifying state variable
- How to make a folder static in react
- Where to get props and set props in a functional component in React Js?
- Text entered into an input-field is being duplicated to the state of another input field's value - why?
- Calling a function only when another function finishes running in React
- dispatch action triggering, but redux store not updating
- how to check if a click event occurred within or outside a specific element
- react setstate TypeError: Cannot read property 'setState' of undefined
- How can I solve this 422 error when trying to send information to the database using an axios POST request?
- make the header of a div sticky, and take up the width of the div
- Which is the best practise for using axios in React Project
- Compiled file with react.js too large
- Simple Carousel Component in React
- How to set new locale state from observable array in React?
- Uncaught DOMException: This input element accepts a filename, which may only be programmatically set to the empty string
- How to setup multistage builds for a ReactJS App with server side rendering
- Horizontal Menu CSS Material UI ReactJS
- React.Fragment wraps rows into div instead of table
- How to access Redux store using React Router?
- Using components from an external directory in a Electron project with Webpack
- scratch-blocks@0.1.0 prepublish: `python build.py && webpack`
- How to add elements dynamically using redux
- "Error: zoid destroyed all components↵" error in reactjs nextjs