Is it possible to optionally replace tags in a React component?

Question

React

I am making an address book with cards in react, which are searched, sorted, can be edited, etc. I thought that, components of this type should be forms, i.e. each card is a form, but should become one when you click on "edit" (div => form). How can this be adequately implemented? Just make two components for editing and static?

Answer 1

const Form = ({ children, ...rest }) => <form {...rest}>{children}</form>;
const Div = ({ children, ...rest }) => <div {...rest}>{children}</div>;

const Card = ({ editable }) => {
  const Container = editable ? Form : Div;
  return <Container>{"Тут ваш контент"}</Container>;
};

ReactDOM.render(<Card />, document.getElementById("root"));
ReactDOM.render(<Card editable />, document.getElementById("root"));

Answer 2

You can make those fields that can be edited as inputs and set the disabled property to them. This property is bound to the state. When you make money to edit - the state has changed - all disabled properties are removed, edit, save and change the state to disabled again