View prop-alias-fix.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Props = HTMLAttributes<HTMLInputElement> | |
const CustomInput = ({ onChange, ...props }: Props) => { | |
const handleChange = (event) => { | |
/// ... some logic | |
onChange(event) | |
} | |
return <input {...props} onChange={handleChange} /> | |
} |
View prop-alias.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Props = HTMLAttributes<HTMLInputElement> & { | |
onUpdate: (value: string) => void | |
} | |
const CustomInput = ({ onUpdate, ...props }: Props) => { | |
const onChange = (event) => { | |
/// ... some logic | |
onUpdate(event.target.value) | |
} |
View incomplete-props-fix.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Props = InputHTMLAttributes<HTMLInputElement> | |
const CustomInput = (props: Props) => { | |
// ...some additional logic | |
return <input {...props} /> | |
} |
View incomplete-props.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Props = { value: string; onChange: () => void } | |
const CustomInput = ({ value, onChange }: Props) => { | |
// ...some additional logic | |
return <input value={value} onChange={onChange} /> | |
} |
View char-count-input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Props = InputHTMLAttributes<HTMLInputElement> | |
const Input = (props: Props) => { /* ... */ } | |
const CharCountInput = (props: Props) => { | |
return ( | |
<div> | |
<Input {...props} /> | |
<span>Char count: {props.value.length}</span> | |
</div> |
View styled-components.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import styled from 'styled-components' | |
const Button = (props) => { /* ... */ } | |
const StyledButton = styled(Button)` | |
border: 1px solid black; | |
border-radius: 5px; | |
` | |
const App = () => { |
View message-4.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const TextMessage = ({ text }) => { | |
return ( | |
<div> | |
<p>{text}</p> | |
</div> | |
) | |
} | |
const ImageMessage = ({ text, imageUrl }) => { | |
return ( |
View message-3.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Message = ({ text, imageUrl, audioUrl }) => { | |
if (audioUrl) { | |
return ( | |
<div> | |
<audio controls> | |
<source src={audioUrl} /> | |
</audio> | |
</div> | |
) | |
} |
View message-2.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Message = ({ text, imageUrl }) => { | |
return ( | |
<div> | |
{imageUrl && <img src={imageUrl} />} | |
{text && <p>{text}</p>} | |
</div> | |
) | |
} |
View message-1.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Message = ({ text }) => { | |
return ( | |
<div> | |
<p>{text}</p> | |
</div> | |
) | |
} |
NewerOlder