Dynamic Borders on React based on Items

Question

So, I'm in the case where I need to build some dynamic borders, in several case, also the case when the color is red in not correct validation.

Here is the dynamic so-called border I have build:

const dynamicBorders = {
        borderRight: `1px solid ${color}`,
        borderLeft: `1px solid ${color}`,
        borderTop: props.isFirst === true ? `1px solid ${color}`: `.5px solid ${color}`,
        borderBottom: props.isLast === true ? `1px solid ${color}` : `.5px solid ${color}`,
        borderRadius: props.isFirst === true && props.isLast === false ? '10px 10px 0px 0px': props.isFirst === false && props.isLast === true ? '0px 0px 10px 10px' : props.isFirst === true && props.isLast === true && '10px' ? props.isFirst === false && props.isLast === false && '0' : '0px 0px 0px 0px',
    };

So with this I have achieved this, but still the border in middle is not correct, I don't know.

So this is one answer from a member, but that doesn't work on error mode, but that fixes the duplicate order.

const dynamicBorders = {
    borderRight: `1px solid ${color}`,
    borderLeft: `1px solid ${color}`,
    borderTop: `1px solid ${color}`,
    borderBottom: props.isLast === true ? `1px solid ${color}` : '',
    borderRadius: props.isFirst === true && props.isLast === false ? '10px 10px 0px 0px': props.isFirst === false && props.isLast === true ? '0px 0px 10px 10px' : props.isFirst === true && props.isLast === true && '10px' ? props.isFirst === false && props.isLast === false && '0' : '0px 0px 0px 0px',
};

But here is the item when it has an error:

And this is because: const color = props.errorMode === true ? props.error === true ? '#F79DA1' : '#EDEDED' : '#EDEDED'

For example keep in mind, the color is for example gray and red, that is the most hardest part to handle, when we highlight one of the item with red borders. — nevoni3008, Jul 18 '22 at 08:21
Beside the props.isFirst, props.isLast, I have also props.isMiddle, but I'm not using it. — nevoni3008, Jul 18 '22 at 08:23
No, I didn't, that is the half of a pixel so the border top and bottom match the 1px look — nevoni3008, Jul 18 '22 at 08:40
can you try this `borderTop: '1px solid ${color}', borderBottom: props.isLast === true ? '1px solid ${color}' : ''` — iamhuynq, Jul 18 '22 at 08:44
No, didn't work, but why, basiclly the code I shared is correctly implemented — nevoni3008, Jul 18 '22 at 08:49

iamhuynq · Answer 1 · 2022-07-18T10:27:53.190

Your code is not working, because you can not set border width less than 1px, you can check here. So you can try this

const dynamicBorders = {
    borderRight: `1px solid ${color}`,
    borderLeft: `1px solid ${color}`,
    borderTop: `1px solid ${color}`,
    borderBottom: props.isLast === true ? `1px solid ${color}` : '',
    borderRadius: props.isFirst === true && props.isLast === false ? '10px 10px 0px 0px': props.isFirst === false && props.isLast === true ? '0px 0px 10px 10px' : props.isFirst === true && props.isLast === true && '10px' ? props.isFirst === false && props.isLast === false && '0' : '0px 0px 0px 0px',
};

Update answer: You should have colorTop and colorBottom to set color for items below and above error item. I've created a simple code

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
export default function App() {
  const [errors, setErrors] = useState([]);
  const onClick = (idx) => {
    const newErrors = errors.includes(idx)
      ? errors.filter((i) => i !== idx)
      : [...errors, idx];
    setErrors(newErrors);
  };
  return (
    <div className="App">
      {array.map((i, index) => (
        <Item
          key={i}
          errors={errors}
          idx={index}
          isFirst={index === 0}
          isLast={index === array.length - 1}
          onClick={() => onClick(index)}
        />
      ))}
    </div>
  );
}

const Item = (props) => {
  const error = props.errors.includes(props.idx);
  const color = error === true ? "#F79DA1" : "#EDEDED";
  const colorTop = error
    ? color
    : props.errors.map((i) => i + 1).includes(props.idx)
    ? "#F79DA1"
    : "#EDEDED";
  const colorBottom = error
    ? color
    : props.errors.map((i) => i - 1).includes(props.idx)
    ? "#F79DA1"
    : "#EDEDED";
  const dynamicBorders = {
    borderTop: `1px solid ${colorTop}`,
    borderRight: `1px solid ${color}`,
    borderBottom: props.isLast === true ? `1px solid ${colorBottom}` : ``,
    borderLeft: `1px solid ${color}`
  };

  return (
    <div onClick={props.onClick} style={dynamicBorders}>
      test item
    </div>
  );
};

You can check in my codesandbox

Your code is working well, but there is a problem, when the item has an error. @iamhuynq — nevoni3008, Jul 18 '22 at 09:33
in this case, but might be the case all of them have error, and the middle doesn't — nevoni3008, Jul 18 '22 at 09:45
yes it works with 3, but doesn't know how to handle when there are 2 items and where is one item only — nevoni3008, Jul 18 '22 at 10:15
@nevoni3008, oh, so it should validate by index of item in array. I've updated answer and [codesandbox](https://codesandbox.io/s/6bq3cb?file=/src/App.js) — iamhuynq, Jul 18 '22 at 10:19
This is better for sure, don't forgt also that in our case we can have more than 1 error or null errors, ` const [errorIdx, setErrorIdx] = useState([1, 2]);` — nevoni3008, Jul 18 '22 at 10:21
@nevoni3008 oh, so errorIdx should be a array of index error items, and you can validate by check that array is includes index or not. I've updated my [answer](https://codesandbox.io/s/6bq3cb?file=/src/App.js:58-1374) — iamhuynq, Jul 18 '22 at 10:29

Dynamic Borders on React based on Items

1 Answers1